您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

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

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)。

我们通过表格比较一下这两种方案

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1347.html
overflow:hidden真的失效了吗
网页前端开发jQuery事件编写进阶
图趣网微信
建议反馈
×