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

那如果我們要實現(xiàn)蠟筆的效果。要怎么處理呢,如果我們將蠟筆畫放大后看就會知道那是一些很小的分散顆粒狀大小的粒子，這樣我們就有了思路了。我們還是沿用DEMO3的例子，在其基礎(chǔ)上進(jìn)行開發(fā)，需要注意的一點是粒子的分布問題，如何才能將粒子均勻的分布呢，不知道大伙們這么久沒學(xué)數(shù)學(xué)是不是都將知識還給老師了。這里我們會用到一些基本的數(shù)學(xué)知識， 具體思路請看下圖，

請參照源代碼

　　draw: function(ctx) {
            var v = this.subtract(this._latest);//當(dāng)前點與下一個點的距離的橫縱坐標(biāo)
            var s = Math.ceil(this.size / 2);		//算出粒子的單位長度
            var stepNum = Math.floor(v.length() / s) + 1;	//算出步長  v.length()為斜線長度
            v.normalize(s);//當(dāng)前點與下一個點的

            var sep = 1.5; // 分割數(shù)  控制畫筆的濃密程度  關(guān)鍵所在
			//粒子的大小 根據(jù)畫筆描繪的速度（畫筆的停留時間）進(jìn)行調(diào)整
            var dotSize = sep * Math.min(this.inkAmount / this._latestStrokeLength * 3, 1);
            var dotNum = Math.ceil(this.size * sep);
            var range = this.size / 2;
            var i, j, p, r, c, x, y;
			$whitemode_display.innerHTML="繪制的畫筆顏色是"+brush_color;
            ctx.save();
            ctx.fillStyle = currentColor;
			$pos_display.innerHTML='你上一點鼠標(biāo)的位置為('+this.x+','+this.y+').
你當(dāng)前鼠標(biāo)的位置為('+this._latest.x