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

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

請參照源代碼

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

            var sep = 1.5; // 分割數(shù)  控制畫筆的濃密程度  關(guān)鍵所在
			//粒子的大小 根據(jù)畫筆描繪的速度（畫筆的停留時(shí)間）進(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='你上一點(diǎn)鼠標(biāo)的位置為('+this.x+','+this.y+').
你當(dāng)前鼠標(biāo)的位置為('+this._latest.x