之前寫了一篇Canvas畫圖-一個比想象中更騷氣的圓(漸變圓環)，後面又寫了使用SVG實現的方法 一個比想象中更騷氣的圓-svg實現, 這篇繼續學習和Canvas有關的知識，這篇類似之前的一個總結，主要是用滑鼠在Canvas上塗鴉，以及儲存塗鴉為圖片。
滑鼠事件
整個原理比較簡單，主要是監聽mousedown,mousemove兩個事件，轉換成相應Canvas上的座標，然後就是之前用的畫線的知識了。這裡注意如果是移動端，需要使用touchstart和touchmove事件。
首先是設定Canvas的寬高：
var canvas = $("#canvas"),
ctx = canvas[0].getContext('2d'),
winWidth = $(window).width(),
winHeight = $(window).height();
canvas.attr('width',winWidth).attr("height",winHeight);複製程式碼監聽mousedown事件：
canvas.on("mousedown",function(e){
var sx = e.pageX - offset.left, //做個換算以防萬一
sy = e.pageY - offset.top;
running = "draw";
ctx.beginPath();
ctx.moveTo(sx,sy);
});複製程式碼這裡主要是把起始點給設定到滑鼠按下去的地方。
監聽mousemove事件：
canvas.on("mousemove", function(e){
if(running == "draw"){
toDraw(e.pageX-offset.left, e.pageY-offset.top)
}
});複製程式碼這裡主要是判斷一下，如果是點了之後move的就開始去畫線。
還要監聽一下mouseup事件，用來清除按下去時設定的狀態，防止沒按就移動滑鼠也會畫線，如果是移動端，改成監聽touchend事件：
canvas.on("mouseup", function(e){
running= "";
});複製程式碼最重要的toDraw方法：
function toDraw(x, y){
ctx.lineTo(x,y); // 畫路徑
ctx.lineWidth = 5;
ctx.strokeStyle = "#ff4444";
ctx.stroke(); // 描邊
ctx.save(); // 儲存狀態
}複製程式碼這樣基本上就實現了在Canvas上用滑鼠塗鴉，思路還是比較簡單。
儲存塗鴉
塗鴉完之後我們我們可以把Canvas儲存成圖片，使用Canvas提供的toDataURL()方法。
$("#save").click(function(){
$("img").remove();
var img = new Image();
img.src = canvas[0].toDataURL("image/jpeg", 1);
$("body").append(img);
});複製程式碼這裡新增了一個叫save的按鈕，然後使用了toDataURL()方法把Canvas儲存為base64資料，然後弄個Image顯示出來。
toDataURL方法預設是儲存為png格式，這裡使用的是儲存為jpeg格式，質量設定為1，質量引數為0~1，越高質量越好，但是也越大。
事實上這裡就這樣儲存jpeg格式的話是會有問題的，會發現底色是黑色的。原因是jpeg的介面本身不是很完善，當canvas沒有填充顏色或者圖片的時候，儲存的jpeg由於是直接由png的alpha通道強制轉換過來，所以在png的透明部分就會變成黑色。
解決方法倒也簡單就是一開始畫之前給Canvas填個白色底。
ctx.fillStyle = '#fff';
ctx.fillRect(0,0,winWidth,winHeight);複製程式碼當然也可以使用JPEGencoder來把png轉成jpeg。
效果：
完整程式碼：