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

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

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