切记:canvas是基于状态绘制的!!!
HTML
-
<canvas id="canvas"></canvas>
Javascript
-
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //下面使用context进行绘制
Context
-
// 绘制直线 context.moveTo(x,y);// 将笔尖挪到位置(x,y) context.lintTo(x,y);// 从上一个坐标点开始连接到当前坐标点 // 绘制弧线 context.arc(cx,cy,r,sAng,eAng,anticlock=false); // 重新开始一段路径和结束当前路径,不用成对出现 context.beginPath();// 从现在开始我要进行一段全新的绘制 context.closePath();// 绘制封闭的图形 // 状态 context.lineWidth context.strokeStyle context.fillStyle // 绘制,使用的时候如果要同时使用描边和填充,那么请先使用填充,再使用描边,不然描的边会变窄 context.stroke();// 绘制线 context.fill();// 绘制填充色块 // 对当前画布上的指定矩形区域进行刷新,会用在动画的时候对屏幕进行一次清空,之后进行重绘制 context.clearRect(x,y,width,height); // 找到该上下文绘图环境对应的画布,从而调用画布的其他属性 context.canvas
Canvas
-
// 画布大小 canvas.width canvas.height //上下文绘图环境 canvas.getContext('2d');
Animation
-
setInterval(function(){ render(); update(); },50)