画出你的风格：HTML5创意画板的设计教程(3)

2013/2/22 23:17:48来源：微博UDC

ctx.arc(pos.x,pos.y,DEFAULT_BRUSH_SIZE,0,Math.PI * 2,true); /**** *context.arc(x, y, radius, startAngle, endAngle, anticlockwise) *参数 x,y表示圆心 *radius半径 *startAngle起始弧度 *endAngle终止弧度 *anticlockwise是否为逆时针方向 ***/ ctx.fill();//填充绘画路径 ctx.restore();//恢复绘画状态 }

似乎这样的大功告成了。看这里的演示代码：DEMO1(http://runjs.cn/detail/gxeeyocw)

当我们画画时，如果绘制笔移动的较快的时候，就会发现出现了断断续续的情况，这是怎么回事呢？原来我们只设置了一个点每过1/60秒就更新一下位置，当我们绘图时如果画笔移动的速度够快时绘制的不够密集，绘制的点久不能连接起来，从而引起断续的现象。

可能会有些人说可以设置时间间隔更小，比如设置为1/1000秒，也就是将页面中的代码

　　setInterval(loop, 1000 / 60);

改为

　　setInterval(loop, 1000 / 1000);

甚至无穷小，这样不就解决了吗。但是相信很多人都不会推荐这样的方法，因为这不仅仅会影响到页面的效率，而且也没有从根本上解决问题，setinterval调用间隔的时间往往会有诸多限制，所以这样的方法是行不通的。

要让线连贯起来最简单的方法：那就用线连起来吧。（旁白：废话，⊙﹏⊙b汗）我们知道两点确定一条直线，所以只要我们确定两个点的坐标即可。亦即每个时间间隔单位，我们获取一次当前点的坐标就好了。然后使用canvas的moveTo函数移动下一个点，记录当前点坐标和上一个点的坐标，并使用canvas的lineTo函数将线连起来，然后不要忘了用stroke函数绘制出来，具体看这里的代码：DEMO2(http://runjs.cn/detail/r52qaltg)。