html5canvas素材HTML5canvas绘制基本

canvas构造：

如果不给canvas指定大小，canvas默认是300px宽，150px高。
是行内元素。
常日利用width或者height属性指定其大小，不要利用CSS给canvas指定其大小。

绘图紧张在context：

html5canvas素材HTML5canvas绘制基本 Java

canvas.getContext('2d')

画直线：

context.moveTo(x,y);context.lineTo(x+500,y+200);context.stroke()

案例：

<!DOCTYPE html><html><body><canvas id=\"大众myCanvas\公众 width=\"大众300\"大众 height=\公众150\"大众 style=\"大众border:1px solid #d3d3d3;\"大众>Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById(\"大众myCanvas\公众);var ctx=c.getContext(\"大众2d\"大众);ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(300,150);ctx.stroke();ctx.closePath();</script></body></html>

canvas 是基于状态绘制的，即先定义状态，后绘制。

起始一条路径和结束（回到出发点）路径

ctx.beginPath();ctx.closePath(); //会自动将不封闭的图形加上连线

矩形：

context.rect(x,y,width,height);

画圆和弧：

圆心：arc(100,75,50,0Math.PI,1.5Math.PI,False)半径：arc(100,75,50,0,1.5Math.PI,False)开始角：arc(100,75,50,0,1.5Math.PI,False)结束角：arc(100,75,50,0,1.5Math.PI,False)方向：默认False为顺时针，True为逆时针。

更多分外设置，请参阅：http://www.w3school.com.cn/tags/html_ref_canvas.asp

制作动画的架构：

setInterval{ function(){//每帧要做什么事情 render();//绘制当前的画面 update();//绘制画面调度的数据和构造 ], 100//每隔多少韶光实行帧动画函数};