“canvas絕對不分男女老少幼的，神秘莫測只是它選擇了裝逼。canvas更是一門藝術，一種審美的逼格。所以一直以來web開發語言都在找方法要將canvas重新包裝起來，使得深井的民眾，對于canvas能有更深一層的了解。”
——題記，改變源自《少林足球》

正文

今天，我們就來講講“藝術”，這詞瞬間逼格上升導致不大適應，還是降個檔，不過也跟藝術有那么點關聯，說說移動端的web畫板實現吧。先上效果圖：

簡書字樣效果.png

有沒有看出啥名堂？從上面的畫板，我們可以直觀而又直接的看到上、下兩部分，上為畫板框，下為工具欄。畫板框：底圖是自選的蔚藍大海之圖，蒙層是略帶透明度的黑色之層，劃開圖層寫字。工具欄：擁有撤銷，清除，選擇筆觸大小的功能。那這種又是“刮刮卡”又可寫字的畫板怎么實現呢？下面且聽概說。

首當其沖，當然是思考技術關鍵點辣——蒙層寫文字咋實現，現有方式，canvas絕對是最佳之選。

可知道canvas有個合成屬性globalCompositeOperation，這個有意思了，利用destination-out可實現底圖覆蓋圖層之效，“大頭”屬性。另外，這里也列了部分的canvas的屬性方法（懂得略過），設置的鏈接皆是中文版w3cschool，不過建議結合看英文版w3cschool或者W3C，中文的翻譯嘛有時候會有一丟丟“小拗口”：

canva部分方法屬性

1. fillStyle //設置畫板的填充顏色

2. fillRect() //填充畫板顏色
3. lineWidth //設置畫筆大小
4. beginPath() //開始一條路徑
5. moveTo() //設置路徑起始點，不創建線條
6. lineTo() //設置該條路徑終點，并創建直線線條
7. getImageData() //返回ImageData對象，圖像狀態的數據
8. putImageData() //把圖像數據(指定的ImageData對象)放到畫布上
9. globalCompositeOperation //圖像合成狀態屬性
10. save() //保存canvas繪制狀態
11. getContext() //創建畫布環境

畫板簡單流程

創建canvas(width與height必須) → 創建畫布環境(getContext) → 繪制蒙層矩形合成(globalCompositeOperation)，設置畫筆，初始化數據 → touchstart，touchmove，touchend事件(畫路徑，存入數組save，便于撤銷) → 基本完成畫板；
撤銷事件：讀取數組數據，putImageData；
清除事件：設置畫板為原始狀態，也可選擇用canvas的clearReact方法清除，邏輯會稍有些變化；
部分代碼如下：

draw.png

清除畫板.png

歷史數據.png

var painter = new Painter({
    layer: 'mask',  //蒙層的id名稱
    cancelButton: 'btn-cancel', //取消按鈕的id名稱（必選）
    clearButton: 'btn-clear',   //清楚畫板的按鈕名稱（必選）
    lineWidth: 10,              //筆觸的寬度（可選），默認為5
    layerBg: "rgba(0, 0, 0, 0.8)",  //蒙層的顏色（可選），默認為"rgba(255, 255, 255, 0.8)"
    shadowBlur: 10, //筆觸陰影（可選），默認值0
    cvaWidth: 800,  //canvas的寬度，默認值600
    cvaHeight: 500  //canvas的高度，默認值400
});

下載引用文件，css可布局自己的樣式，js實例化對象，填參數，看效果，代碼僅供參考，不吝賜教，共促方是大促吼~

result.png