畫出你的風格：HTML5創(chuàng)意畫板的設計教程(2)

loop為循環(huán)執(zhí)行的函數(shù)。

當然，你也可以采用requestAnimationFrame(如果不了解該屬性可以自行百度^_^)。這取決于你的習慣。

那么現(xiàn)在我們需要獲取用戶鼠標點擊的位置，在這里我們需要區(qū)分pageX,clientX,offsetX,layerX等概念 ，這里有篇文章講解，你可以看看http://www.funnyhao.com/pagex-clientx-offsetx-layerx-of-those-things/

由于我們現(xiàn)在畫布直接放在頁面上左上部，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();//保存當前繪圖狀態(tài)
            ctx.fillStyle = DEFAULT_BRUSH_COLOR;//設置填充的背景顏色
		  	ctx.lineWidth =DEFAULT_BRUSH_SIZE;  //設置畫筆的大小
		    ctx.lineCap = "round"; //設置線條，讓線條邊緣更圓滑
            ctx.beginPath();