canvas构造:

<canvas id=\"大众canvas\公众></canvas>

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

绘图紧张在context:

html5canvas连线HTML5canvas绘制基本 Docker

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//每隔多少韶光实行帧动画函数};