畫出你的風格：HTML5創(chuàng)意畫板的設計教程(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是否為逆時針方向 ***/ ctx.fill();//填充繪畫路徑 ctx.restore();//恢復繪畫狀態(tài) }

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

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

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

　　setInterval(loop, 1000 / 60);

改為

　　setInterval(loop, 1000 / 1000);

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

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

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