画出你的风格:HTML5创意画板的设计教程(2)
2013/2/22 23:17:48来源:微博UDC
'你当前鼠标的位置为('+pos.x+','+pos.y+')';
if (isMouseDown) draw(context);}
loop为循环执行的函数。
当然,你也可以采用requestAnimationFrame(如果不了解该属性可以自行百度^_^)。这取决于你的习惯。
那么现在我们需要获取用户鼠标点击的位置,在这里我们需要区分pageX,clientX,offsetX,layerX等概念 ,这里有篇文章讲解,你可以看看http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/
由于我们现在画布直接放在页面上左上部,padding和margin都为0,因此我们直接用clientX和clientY即可.当用户第一次点击鼠标时,我们设置isMouseDown为true,开启绘画模式。
function mouseDown(e) { isMouseDown = true; }
获取了用户点击的位置后,我们在约定的时间间隔后(1/60秒)再次获取用户所在的位置,并进行更新
function loop() { if (isMouseDown) draw(context);//绘制鼠标点击位置 }
function mouseMove(e) { pos.x=e.clientX;//设置x坐标 pos.y=e.clientY;//设置y坐标 $pos_display.innerHTML='你当前点击鼠标的位置为('+pos.x+','+pos.y+')';//更新当前鼠标点击的位置 }
接下来我们就可以绘制了
function draw(ctx) { ctx.save();//保存当前绘图状态 ctx.fillStyle = DEFAULT_BRUSH_COLOR;//设置填充的背景颜色 ctx.lineWidth =DEFAULT_BRUSH_SIZE; //设置画笔的大小 ctx.lineCap = "round"; //设置线条,让线条边缘更圆滑 ctx.beginPath();
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1347.html
本文地址:http://www.tuquu.com/tutorial/wd1347.html
这些是最新的
最热门的教程