画出你的风格：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();