画出你的风格：HTML5创意画板的设计教程(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(); } 　　});

进行分析比较。思路的重点是在一定间隔后对粒子进行随机分散排布，并能处理在画笔移动的比较快的时候的的绘制问题。为了得到更好的展示效果，我们一般还会控制透明度进行调整。
处理完这些后，我们如果喜欢这样的图片，还可以使用图片导出功能，方法也挺简单。去掉监听事件，使用canvas的toDataURL内置函数，然后展示到新打开的窗口中。
我们就可以运行一下源代码看看带擦出功能