使用JavaScript模塊繪圖的好處在于可以利用模塊化開發(fā)，簡(jiǎn)化代碼量，提高代碼復(fù)用率，以及方便模塊化結(jié)構(gòu)調(diào)用。下面我們將具體介紹如何使用JavaScript模塊繪制圖形。 先看一個(gè)實(shí)例，繪制一個(gè)簡(jiǎn)單的矩形：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20,20,150,100);
ctx.stroke();

解釋一下這個(gè)代碼： 1. 通過document.getElementById()獲取到Canvas元素； 2. 通過getContext()方法獲取到canvas對(duì)象的上下文（context）； 3. 使用beginPath()方法創(chuàng)建一個(gè)新路徑； 4. 使用rect()方法創(chuàng)建一個(gè)矩形路徑； 5. 使用stroke()方法繪制出邊框。 接下來，我們將利用模塊化重構(gòu)上面的例子。

var MyCanvas = MyCanvas || {};
MyCanvas.drawRect = (function () {
return function (canvas_id, x, y, w, h, color) {
var canvas = document.getElementById(canvas_id);
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fillStyle = color;
ctx.fill();
}
})();

代碼解釋： 1. 使用模塊化技術(shù)建立了一個(gè)MyCanvas的命名空間，用于存放所有的canvas相關(guān)API； 2. 使用立即執(zhí)行函數(shù)返回一個(gè)繪制矩形的函數(shù)； 3. 函數(shù)的參數(shù)包括canvas的id，矩形xy坐標(biāo)，寬高，以及填充顏色； 4. 在函數(shù)內(nèi)獲取canvas對(duì)象和上下文，并進(jìn)行繪圖。 現(xiàn)在可以像這樣調(diào)用我們的模塊：

MyCanvas.drawRect("myCanvas", 20, 20, 150, 100, "#f00");

這個(gè)模塊化的方式可以大大提高代碼的復(fù)用率，也可以讓代碼更易于維護(hù)。 在模塊化開發(fā)中，我們可以進(jìn)一步拆分繪圖API。例如，可以使用一個(gè)專門的API處理繪制線段：

MyCanvas.drawLine = (function () {
return function (canvas_id, startX, startY, endX, endY, lineColor, lineWidth) {
var canvas = document.getElementById(canvas_id);
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
ctx.strokeStyle = lineColor;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
})();

我們還可以使用requestAnimationFrame() API，將一個(gè)函數(shù)添加到瀏覽器的動(dòng)畫幀隊(duì)列中（例如，重繪動(dòng)畫）：

MyCanvas.createAnimation = (function () {
var requestId;
var delta = 0;
var lastCalledTime = Date.now();
var fps;
function animate() {
requestId = window.requestAnimationFrame(animate);
var now = Date.now();
delta = now - lastCalledTime;
lastCalledTime = now;
fps = Math.round(1000 / delta);
console.log("FPS: " + fps);
// 在此編寫繪圖代碼
}
return function (canvas_id) {
var canvas = document.getElementById(canvas_id);
var ctx = canvas.getContext("2d");
requestId = window.requestAnimationFrame(animate);
}
})();

我們還可以使用require.js 或 browserify 這樣的工具提供的模塊加載器，來更好地控制繪圖API的加載方式、加載時(shí)機(jī)等。 最后，可以使用canvas繪制出各種復(fù)雜的圖形，例如任意多邊形、圓弧、曲線等。 使用JavaScript模塊化編程方法，能夠大大降低程序耦合，提高代碼復(fù)用率。如果合理地組織數(shù)據(jù)和方法，我們可以發(fā)揮canvas繪圖的強(qiáng)大功能，實(shí)現(xiàn)各種流程圖、地圖、二維碼等圖形的繪制。