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" height="200">
这里创建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画布详解（一）的详细内容。