画出你的风格: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)。
我们通过表格比较一下这两种方案
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1347.html
本文地址:http://www.tuquu.com/tutorial/wd1347.html
这些是最新的
最热门的教程