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

+','+this._latest.y+')';//更新當前鼠標點擊的位置 ctx.beginPath(); if(wmode=="擦除模式"){ ctx.strokeStyle=brush_color; ctx.lineWidth =DEFAULT_BRUSH_SIZE; ctx.lineCap = "round"; ctx.beginPath(); p = this._latest;//獲取下一個點位置 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(); } 　　});

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