專案需求：需要實現乙個可以自由書寫的小畫板
對於熟悉canvas的同學來說，這個需求很簡單，大致邏輯如下：
1）監聽事件pointerdown，pointermove，pointerup
2）標記是否拖拽畫線模式變數 isdrawing，在down事件時置為true，up的時候置為false
3）使用canvas的api，設定線條樣式，呼叫繪製線條介面lineto方法
短短幾十行**就能實現：
123實現效果如下圖：41617
181958
59
以上就簡單的實現了畫板功能，如果要求不高的使用者可以使用，但一旦遇到有點要求的使用者就無法交付這種產品，仔細看是線條折線感太強。
主要原因：
我們呼叫的api方法lineto是兩點連線也就是直線
瀏覽器對滑鼠事件mousemove的採集是有採集頻率的，並不是每個滑鼠移動經過的每乙個畫素點都會觸發事件。
當滑鼠移動的越快，那麼兩點之間的間隔就越遠，那麼折線感就更明顯。
canvas提供的api中是有現成介面的，貝塞爾系列的介面就能滿足我們的要求，接下來我們講一下使用二次貝塞爾曲線繪製平滑曲線。
quadraticcurveto(cpx,cpy,x,y)
二次貝塞爾曲線介面需要四個引數，cpx，cpy是曲線的控制點，x，y是曲線終點。
有人問那曲線的起點在**？其實曲線的起點取決於上一操作狀態，可以是moveto的位置，或者是lineto的位置，或者是貝塞爾的終點。
那麼怎麼呼叫quadraticcurveto，引數怎麼傳呢？
我們需要找出關鍵位置，直接用例子告訴大家吧
1）假如我們用滑鼠採集到abcdef六個點
2）取前面三個點abc計算，bc的中點b1，以a為起點，b為控制點，b1為終點，那麼利用quadraticcurveto可以繪製出這樣一條貝塞爾曲線
3）接下來計算cd的中點c1，以b1為起點，c為控制點，c1為終點，那麼利用quadraticcurveto可以繪製出這樣一條貝塞爾曲線
4）以此類推，當到了最後乙個點時以d1為起點，e為控制點，f為終點，結束貝塞爾繪製。
ok我們介紹了具體演算法的影響，那用該演算法對我們前面的**進行改造：
123在原有基礎上我們用了乙個陣列points儲存滑鼠經過的點，根據演算法可知繪製貝塞爾曲線至少要用三個點，繪製過程中維護points陣列。41617
181969
7071
實現效果如下，可見平滑了很多！
canvas簡易畫板
window.getcomputedstyle 是乙個可以獲取當前元素所有最終使用的css屬性值。返回的是乙個css樣式宣告物件 object cssstyledeclaration 唯讀，而element.style能讀能寫。語法如下 var style window.getcomputedsty...
canvas簡易畫板
閒著無事，也學習一下html5，也要跟進時代嘛，否則就落伍了。這裡是乙個簡易的畫板，目前還沒有實現滑鼠移動時候的軌跡，只是捕獲滑鼠點下的座標作為起點，和滑鼠彈起的座標作為終點。畫圓形的時候滑鼠點下為原點的位置，滑鼠彈起的座標計算半徑。當中發現乙個問題，矩形邊框沒有實現，目前是用兩個矩形實現的邊框效果...
canvas 閉合 canvas 簡版畫板
結合之前的api可以來個簡單的實踐 栗子 結合滑鼠互動效果實現畫板的功能，有寫的功能以及橡皮擦的功能 撤銷 前進就先不考慮了 首先來個布局 需要調節線的粗細以及橡皮擦的大小，我們需要h5的範圍表單元素 html 線的粗細 橡皮檫的大小 js1 獲取表單元素 線，橡皮大小 var linerange ...