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

ctx.arc(pos.x,pos.y,DEFAULT_BRUSH_SIZE,0,Math.PI * 2,true); /**** *context.arc(x, y, radius, startAngle, endAngle, anticlockwise) *參數(shù) x,y表示圓心 *radius半徑 *startAngle起始弧度 *endAngle終止弧度 *anticlockwise是否為逆時(shí)針方向 ***/ ctx.fill();//填充繪畫路徑 ctx.restore();//恢復(fù)繪畫狀態(tài) }

似乎這樣的大功告成了?？催@里的演示代碼：DEMO1(http://runjs.cn/detail/gxeeyocw)

當(dāng)我們畫畫時(shí)，如果繪制筆移動(dòng)的較快的時(shí)候，就會(huì)發(fā)現(xiàn)出現(xiàn)了斷斷續(xù)續(xù)的情況，這是怎么回事呢？原來我們只設(shè)置了一個(gè)點(diǎn)每過1/60秒就更新一下位置，當(dāng)我們繪圖時(shí)如果畫筆移動(dòng)的速度夠快時(shí)繪制的不夠密集，繪制的點(diǎn)久不能連接起來，從而引起斷續(xù)的現(xiàn)象。

可能會(huì)有些人說可以設(shè)置時(shí)間間隔更小，比如設(shè)置為1/1000秒，也就是將頁面中的代碼

　　setInterval(loop, 1000 / 60);

改為

　　setInterval(loop, 1000 / 1000);

甚至無窮小，這樣不就解決了嗎。但是相信很多人都不會(huì)推薦這樣的方法，因?yàn)檫@不僅僅會(huì)影響到頁面的效率，而且也沒有從根本上解決問題，setinterval調(diào)用間隔的時(shí)間往往會(huì)有諸多限制，所以這樣的方法是行不通的。

要讓線連貫起來最簡單的方法：那就用線連起來吧。（旁白：廢話，⊙﹏⊙b汗）我們知道兩點(diǎn)確定一條直線，所以只要我們確定兩個(gè)點(diǎn)的坐標(biāo)即可。亦即每個(gè)時(shí)間間隔單位，我們獲取一次當(dāng)前點(diǎn)的坐標(biāo)就好了。然后使用canvas的moveTo函數(shù)移動(dòng)下一個(gè)點(diǎn)，記錄當(dāng)前點(diǎn)坐標(biāo)和上一個(gè)點(diǎn)的坐標(biāo)，并使用canvas的lineTo函數(shù)將線連起來，然后不要忘了用stroke函數(shù)繪制出來，具體看這里的代碼：DEMO2(http://runjs.cn/detail/r52qaltg)。

我們通過表格比較一下這兩種方案