JS之Canvas繪製教程
作者：邵發
官網：http://afanihao.cn/java
本文是Java學習指南系列教程的官方配套文檔。內容介紹在網頁前端使用Canvas進行自定義繪製的技術。前端的圖表展示、驗證碼、圖片剪裁處理等場合會用到這項技術。
1. 添加<canvas>
<canvas>是一種特殊的網頁控件，在它上面可以實現自定義的圖形繪製。
例如，
<canvas id='drawing' width='240' height='100' style='background-color: #fdefdf;' ></canvas>
此時定義一個寬度240px、高度100px的畫布。顯示如下。
需要注意的是，canvas的大小應該用 width/height屬性來定義。如果用css定義，後面在繪製文本和圖片的時候尺寸會有畸性。
2. 在canvas上繪製
使用JavaScript可以在canvas對象上繪製。下面，在canvas上繪製一個80x40的矩形。
對應的代碼：
my.test02 = function(){
var canvas = document.getElementById('drawing');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
ctx.fillStyle = '#F00';
ctx.fillRect(10,10, 80,40);
}
首先，使用getElementById()得到canvas對象，然後得到GraphicsContext，然後使用ctx進行繪製就行了。如果你之前學過Java學習指南的Swing高級篇，則此繪製技術對你十分容易，因爲繪製的所有的概念都是相同的。
也可以使用jQuery來獲取canvas對象，例如：
var canvas = $('#drawing')[0];
3. 填充和描邊
在繪製形狀和文字時，都有兩組函數：一組以fill***打頭，稱爲填充。一組以stroke***打頭，稱爲描邊。
下面，繪製兩個矩形，如圖所示。
第一個矩形，以紅色填充內容。第二個矩形，以藍色描繪邊框。
對應代碼如下。
my.test03 = function(){
var canvas = document.getElementById('drawing');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
// 填充
ctx.fillStyle = '#F00'; // 填充色
ctx.fillRect(10,10, 80,40);// 參數爲 x, y, width, height
// 描邊
ctx.strokeStyle = '#3f778e';
ctx.strokeRect(100,10, 80,40);
}
其中，fillRect()用於填充一個矩形區域，而storeRect()用於描邊。而fillStyle指定填充色，strokeStyle指定邊框顏色。
也可以指定一個半透明的顏色，例如 ctx.fillStyle = 'rgba(240,240, 240, 0.5) ' 最後一個0.5表示透明度。
4. 繪製多邊形
三角形、四邊形、五邊形。。。等等，都稱爲多邊形。例如，繪製一個不規則的四邊形。
示例代碼如下：
ctx.beginPath(); // 開始一個路徑
ctx.moveTo(10,10); // 指定起點
ctx.lineTo(10, 60); // 以直線連接到下一個頂點
ctx.lineTo(40, 80); // 以直線連接到下一個頂點
ctx.lineTo(70, 10); // 以直線連接到下一個頂點
ctx.closePath(); // 閉合路徑, 回到起點
ctx.fill(); // 繪製路徑所圍的閉合區域
這裏的Path表示一個路徑，一個閉合的路徑正好圍成一個區域。從beginPath()開始，到closePath()結束，完成一個路徑的定義。最後用ctx.fill()對所圍在的區域進行填充，或ctx.stroke()進行描邊。
5. 繪製圓弧和圓形
使用 arc() 可以用來定義一個圓弧路徑。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
其中，x,y是圓心座標，radius爲半徑，startAngle爲起點弧度，endAngle爲終點弧度，anticlockwise表示反時針方向(true)或逆時針(false)。
例如，
從右上角的45度(PI/4) 位置，到上方的270度( PI*3/2)位置，以逆時針連接。
示例代碼如下：
ctx.beginPath();
ctx.arc(50, 50, 30, Math.PI/4, Math.PI*3/2, true);
ctx.closePath();
ctx.stroke();
如果要繪製一個完整的圓形，可以指定起點爲0，終點爲PI * 2 即可。
6. 直線與圓弧的組合
可以由直線和圓弧組合在一起，圍成一個特殊的路徑。例如，
此圖形由左右兩個圓弧，和上下兩條直線圍成。
示例代碼如下：
// 所圍區域的參數, 需要草紙上寫比劃一下
var cx = 10, cy = 10; // 左上角
var cw = 60, ch = 40; // 寬高
var cr = 20; // 圓弧半徑
// 定義一個由圓弧和直線圍成的路徑
ctx.beginPath();
ctx.arc(cx+cr, cy+cr, cr, Math.PI*3/2, Math.PI/2, true);
ctx.lineTo(cx + cw - cr, cy + ch);
ctx.arc(cx + cw - cr, cy + cr, cr, Math.PI/2, Math.PI*3/2, true);
ctx.closePath();
//描繪路徑
ctx.strokeStyle = '#F00'; // 填充色
ctx.stroke();
7. 繪製文本
使用fillText() 或 strokeText() 可以來繪製文字。例如。
示例代碼如下，
ctx.fillStyle = '#F00';
ctx.font = '30px 宋體';
ctx.textAlign = 'left' ; // 水平位置
ctx.textBaseline = 'top'; // 豎直位置
ctx.fillText("阿發你好", 20, 20);
其中，font用於指定字體，textAlign指定水平對齊，textBaseline用於指定豎直對齊。
fillText ( text, x, y) 帶三個參數，x, y用於指定繪製的位置。x, y的位置和 textAlign, textBaseline一起，決定文本繪製的位置。
例如，'left' 表示x爲文本最左側位置，'top'表示y指定文本的最上沿位置。
textAlign的選項： left, right , center
textBaseline的選項：top, middle, bottom
8. 圖片的繪製
在Canvas上也可以繪製圖片，例如。
事先得在網站裏準備好一張圖片，例如，img/bg.jpg ，然後在JS里加載它。
var img = new Image();
img.src = './img/bg.jpg';
img.onload = function(){
}
其中，img.src指定圖片的路徑URL。當圖片加載完成時，img.onload()回調被執行。在onload()裏把圖片繪製出來即可。
示例代碼如下：
img.onload = function(){
// 圖片的下載需要一定時間,所以等其onload之後,再繪製到canvas上
ctx.drawImage(img, 0,0, w, h);
// 在圖片上再繪製一些文本
ctx.fillStyle = '#F00';
ctx.font = '20px 宋體';
ctx.textAlign = 'center' ;
ctx.textBaseline = 'top';
ctx.fillText("阿 發 你 好", w/2, 20);
}
9. 鼠標事件處理
canvas和所有DOM對象一樣，支持鼠標事件處理，如mousedown, mouseup, mousemove等。例如，在圖片上支持用鼠標劃選一個短形區域，效果如下所示。
當鼠標按下時，應記錄鼠標開始劃選的位置startX, startY，例如：
canvas.addEventListener('mousedown', function(evt){
my.pressed = true;
my.startX = evt.offsetX;
my.startY = evt.offsetY;
my.endX = evt.offsetX;
my.endY = evt.offsetY;
my.repaint();
});
其中，evt.offsetX和evt.offsetY表示鼠標的位置。
當鼠標拖動劃選時，根據鼠標的當前位置來繪製一個矩形。示例代碼如下。
canvas.addEventListener('mousemove', function(evt){
if(my.pressed){
my.endX = evt.offsetX;
my.endY = evt.offsetY;
my.repaint();
}
});
其中，endX 和 endY 用於記錄鼠標落點的位置。所以，由(startX, startY) 和終點 (endX, endY)便可以繪製出用戶選擇的短形區域。
Canvas的主要繪製方法就是這些，還是一些高級的變形、座標變換、旋轉功能，和Java Swing裏的技術基本一致。以上演示所用的項目源碼和JAR包在此處可以獲取。