HTML5 canvas画布详解（一）

百变鹏仔 3个月前 (10-18) #H5教程

文章标签画布

html5中canvas元素用于在网页上绘制图形。

Canvas的特点

Canvas画布是一个矩形区域，可以控制其每一个像素
Canvas使用JavaScript来控制画图
Canvas具有直线、矩形、圆以及添加图像的方法

Canvas标签的使用

下面的代码是使用canvas画面绘制一个200*200红色矩形：

立即学习“前端免费学习笔记（深入）”；

<!Doctype html><html><head><title>我的canvas页面</title><meta charset="utf-8"/></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.fillStyle="#FF0000";    cxt.fillRect(0,0,200,200);    </script>    </body>    </html>

将上面的代码保存为canvas.html，并将其编码设置为utf-8（否则中文乱码），使用浏览器打开就可以看到如下效果：

<canvas id="myCanvas" width="200"    style="max-width:90%">

这里创建Canvas标签，并定义其id为myCanvas，便于JavaScript绘图时获取该标签对象。
再看JavaScript绘图部分：

    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");    cxt.fillStyle="#FF0000";    cxt.fillRect(0,0,200,200);

第一句getElementById，通过Canvas标签的ID获取canvas对象。
第二句getContext，获取context对象。
第三句调用Context对象的方法fillStyle，即填充其颜色。
第四句调用Context对象的fillRect方法指定填充的区域。

Canvas的其他实例

直线

<!Doctype html><html><head><title>我的canvas页面</title><meta charset="utf-8"/></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");    cxt.moveTo(10,10);    cxt.lineTo(150,50);    cxt.lineTo(10,50);    cxt.stroke();</script></body></html>

运行结果如下：

圆

<!Doctype html><html><head><title>我的canvas页面</title><meta charset="utf-8"/></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");    cxt.fillStyle="#FF0000";    cxt.beginPath();    cxt.arc(70,18,15,0,Math.PI*2,true);    cxt.closePath();    cxt.fill();</script></body></html>

运行结果如下：

渐变

<!Doctype html><html><head><title>我的canvas页面</title><meta charset="utf-8"/></head><body><canvas id="myCanvas" width="200" height="200"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");        var grd=cxt.createLinearGradient(0,0,175,50);    grd.addColorStop(0,"#FF0000");    grd.addColorStop(1,"#00FF00");    cxt.fillStyle=grd;    cxt.fillRect(0,0,175,50);    </script>    </body>    </html>

效果如下：

图像

<!Doctype html><html><head><title>我的canvas页面</title><meta charset="utf-8"/></head><body><canvas id="myCanvas" width="800" height="600"></canvas><script type="text/javascript">    var c=document.getElementById("myCanvas");        var cxt=c.getContext("2d");        var img=new Image();    img.src="1.png";    img.onload=function(e){        cxt.drawImage(img,0,0);    }    cxt.drawImage(img,0,0);    </script>    </body>    </html>

注意，一定要给Img添加onload事件，否则图片不显示。
其中，1.png为自己找的图片素材。打开页面可以看到图片显示在canvas画布中了。我的运行效果如下，图片百度随便找的，凑合看~~

文章推荐

HTML5 canvas画布详解（一）

Canvas的特点

Canvas标签的使用

Canvas的其他实例

直线

圆

渐变

图像

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集