原文地址： https://www.jeremyjone.com/472/ ，轉載請註明
在JavaScript 之 canvas（一）中理解了canvas的繪圖原理。
在JavaScript 之 canvas（二）中掌握了基本圖形的函數，但是這些圖形繪好之後是不會改變的。這並不符合我要做的這個繪圖工具的最基本功能。
那麼這篇文章來實現利用鼠標位置實時繪圖。
首先我們需要了解動態繪圖的思路，canvas在同一時刻，只能顯示一張圖片，也就是說，canvas是靜態的，要實現實時繪圖，就要不停切換canvas顯示的圖片內容，從而達到我們要的效果。
如圖效果，讓圖片按照我們的鼠標移動而改變大小，這樣就需要刷新canvas，現在就來實現這個效果。
第一步，加載圖片和清空canvas
canvas.loadImage = function () {
let self = this;
let img = new Image();
img.src = self.lastImage; // 將最後保存的圖片賦值給img
context.drawImage(img, 0, 0, canvas.width, canvas.height); // 將img展示在canvas中
}
canvas.initCanvas = function () {
context.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas
canvas.loadImage(); // 將最近的圖片展示到canvas中
}
有了這兩個函數，我們就可以自由的清空和加載圖片，那麼圖片從哪裏來，何時保存，看第二步。
第二步，獲取鼠標事件
canvas.onmousedown = function mouseDownAction(e) {
let self = this;
self.X1 = e.offsetX; // 鼠標按下時保存當前位置，爲起始位置
self.Y1 = e.offsetY;
self.isMouseDown = true; // 將按下的flag表示爲true，拖動鼠標時使用
self.loadImage();
};
canvas.onmousemove = function mouseMoveAction(e) {
let self = this;
if (self.isMouseDown) {
self.X2 = e.offsetX;
self.Y2 = e.offsetY;
self.drawing(self.X1, self.Y1, self.X2, self.Y2, e);
}
};
canvas.onmouseup = function mouseUpAction(e) {
let self = this;
self.lastImage = canvas.toDataURL('image/png');
self.isMouseDown = false;
};
當鼠標按下時，獲取事件，保存鼠標當前位置爲起始位置(x1, y1)，並且將一個按下的flag變爲true，這樣在移動鼠標時，可以判斷是否應該繪圖，同時加載背景圖片。
當鼠標按下且移動時，調用自定義的繪圖函數drawing，並且保存鼠標移動時的當前位置，該位置在移動時不停切換，作爲繪圖的結束位置(x2, y2)，圖片會不停的繪製。
當鼠標擡起時，停止繪圖，將移動flag變爲false，同時保存最後一張圖片，這樣就獲取到了我們需要的最後的圖片，後續可以加載爲背景。
繪圖
有了上面的前序工作，我們就可以很自然的開始繪圖工作。
canvas.drawing = function (x1, y1, x2, y2, e) {
let self = this;
if (!context) {
return;
} else {
// 設置畫筆的顏色和大小
context.fillStyle = "red"; // 填充顏色爲紅色
context.strokeStyle = "blue"; // 畫筆的顏色
context.lineWidth = 5; // 指定描邊線的寬度
context.save();
context.beginPath();
self.initCanvas(); // 每次需要調用初始化函數，以清空canvas
// 繪製空心矩形
context.strokeRect(x1, y1, x2 - x1, y2 - y1);
context.restore();
context.closePath();
}
};
這個就是我們在鼠標按下且移動時調用的繪圖函數，它可以幫主我們不停的繪圖，注意每次調用前都需要初始化，也就是清空canvas，這樣就能愉快地使用鼠標繪圖了。
如果需要繪製其他圖形，只需要修改drawing函數即可。
至此，我們稍加修改前一篇文章的基本圖形，就可以根據我們的鼠標進行動態繪圖了。
比如畫筆工具：
canvas.drawing = function (x1, y1, x2, y2, e) {
let self = this;
if (!context) {
return;
} else {
// 設置畫筆的顏色和大小
context.fillStyle = "red"; // 填充顏色爲紅色
context.strokeStyle = "blue"; // 畫筆的顏色
context.lineWidth = 5; // 指定描邊線的寬度
context.save();
context.beginPath();
// 畫筆需要保留之前的移動軌跡，所以不需要初始化清除。
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
// 畫筆功能，需要動態實時將當前位置賦給初始位置，以實現連續筆記，否則就是直線。
self.X1 = self.X2;
self.Y1 = self.Y2;
context.restore();
context.closePath();
這樣的方式有助於理解重載和初始化canvas，可以更好的幫助我們瞭解canvas的工作方式。
至此，基本的繪畫板已經可以實現。添加button和對應的flag之後，基本可以區分繪製。