畫出你的風(fēng)格：HTML5創(chuàng)意畫板的設(shè)計(jì)教程(2)

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

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

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

由于我們現(xiàn)在畫布直接放在頁(yè)面上左上部，padding和margin都為0，因此我們直接用clientX和clientY即可.當(dāng)用戶第一次點(diǎn)擊鼠標(biāo)時(shí)，我們?cè)O(shè)置isMouseDown為true，開(kāi)啟繪畫模式。

function mouseDown(e) {
    isMouseDown = true;
}

獲取了用戶點(diǎn)擊的位置后，我們?cè)诩s定的時(shí)間間隔后（1/60秒）再次獲取用戶所在的位置，并進(jìn)行更新

function loop() {
    if (isMouseDown) draw(context);//繪制鼠標(biāo)點(diǎn)擊位置
}

function mouseMove(e) {
    pos.x=e.clientX;//設(shè)置x坐標(biāo)
	pos.y=e.clientY;//設(shè)置y坐標(biāo)
	$pos_display.innerHTML='你當(dāng)前點(diǎn)擊鼠標(biāo)的位置為('+pos.x+','+pos.y+')';//更新當(dāng)前鼠標(biāo)點(diǎn)擊的位置
}

接下來(lái)我們就可以繪制了

function draw(ctx) {

            ctx.save();//保存當(dāng)前繪圖狀態(tài)
            ctx.fillStyle = DEFAULT_BRUSH_COLOR;//設(shè)置填充的背景顏色
		  	ctx.lineWidth =DEFAULT_BRUSH_SIZE;  //設(shè)置畫筆的大小
		    ctx.lineCap = "round"; //設(shè)置線條，讓線條邊緣更圓滑
            ctx.beginPath();