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

+','+this._latest.y+')';//更新當(dāng)前鼠標(biāo)點(diǎn)擊的位置 ctx.beginPath(); if(wmode=="擦除模式"){ ctx.strokeStyle=brush_color; ctx.lineWidth =DEFAULT_BRUSH_SIZE; ctx.lineCap = "round"; ctx.beginPath(); p = this._latest;//獲取下一個(gè)點(diǎn)位置 ctx.moveTo(this.x,this.y); ctx.lineTo(p.x,p.y); ctx.stroke(); } else{ for (i = 0; i < dotNum; i++) { for (j = 0; j < stepNum; j++) { p = this._latest.add(v.scale(j)); r = random(range); c = random(Math.PI * 2); w = random(dotSize, dotSize / 2); h = random(dotSize, dotSize / 2); x = p.x + r * Math.sin(c) - w / 2; y = p.y + r * Math.cos(c) - h / 2; ctx.rect(x, y, w, h);//邊緣不要太平滑，不要使用arc } } } ctx.fill(); ctx.restore(); } 　　});

進(jìn)行分析比較。思路的重點(diǎn)是在一定間隔后對(duì)粒子進(jìn)行隨機(jī)分散排布，并能處理在畫筆移動(dòng)的比較快的時(shí)候的的繪制問(wèn)題。為了得到更好的展示效果，我們一般還會(huì)控制透明度進(jìn)行調(diào)整。
處理完這些后，我們?nèi)绻矚g這樣的圖片，還可以使用圖片導(dǎo)出功能，方法也挺簡(jiǎn)單。去掉監(jiān)聽事件，使用canvas的toDataURL內(nèi)置函數(shù)，然后展示到新打開的窗口中。
我們就可以運(yùn)行一下源代碼看看帶擦出功能