HTML5中的canvas

来源：互联网发布：李涛疯狂淘宝上市编辑：程序博客网时间：2024/05/18 06:48

1.canvas

HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。

2.浏览器

支持所有的主流浏览器，IE需要9以上。

3.代码示例

<body><canvas id="canvas1" style="width: 100px;height: 100px;background-color: grey;border: 2px solid black "></canvas></body>

通常要加id值，方便以后js调用。

4.canvas坐标

canvas是从左上角的（0，0）开始的。

5.下面来一个完整的范例

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// 设置颜色ctx.fillStyle="#FF0000";// 设置位置ctx.fillRect(0,0,150,75);</script>

6.在canvas中画路径

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// moveTo表示起始坐标ctx.moveTo(0,0);// lineTo表示结束的坐标ctx.lineTo(200,100);// stroke表示画线，设置了坐标，必须用stroke来完成连线ctx.stroke();</script>

7.在canvas中画圆

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// 调用arc函数// 其中的参数分别是：x，y，半径，起始弧度值，结束弧度值。ctx.arc(95,45,40,0,2*Math.PI);// stroke表示画线，设置了坐标，必须用stroke来完成连线ctx.stroke();</script>

8.绘制文本

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// 设置字体大小和字体ctx.font="100px,宋体";// strokeText用来设置空心字体，fill用来设置实心字体ctx.strokeText("空心",10,50);// 内容后面是坐标ctx.fillText("实心",70,50);// stroke表示画线，设置了坐标，必须用stroke来完成连线ctx.stroke();

9.绘制渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// 创建颜色梯度// createLinearGradient的参数是（x,y,x1,y1）var grd=ctx.createLinearGradient(0,0,200,0);// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点grd.addColorStop(0,"blue");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");// 设置形状ctx.fillStyle=grd;ctx.fillRect(0,0,200,200);</script>

下面绘制的是辐射性的渐变

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>// 找到canvas的idvar c=document.getElementById("myCanvas");// 获取其中的内容，2d表示平面的意思var ctx=c.getContext("2d");// 创建颜色梯度// createRadialGradient的参数是（x,y,x1,y1）// 这是绘制一个辐射型的渐变var grd=ctx.createRadialGradient(0,0,100,200,0,50);// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点grd.addColorStop(0,"blue");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");// 设置形状ctx.fillStyle=grd;ctx.fillRect(0,0,200,200);</script>

这里绘制的是一个矩形，你可以结合前面的知识，绘制诸如渐变圆形和渐变文字。

10.把图片加载在canvas里面

<img id="scream" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495286529156&di=6c6667975a7aa6fa08fff64df8067fb4&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F121209%2F234928-12120Z0543764.jpg" width="100px" height="100px"><p>画布:</p><canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("scream");img.onload = function(){    ctx.drawImage(img,10,10);}</script>

阅读全文

0 0