除此之外，在不久的將來，開發人員還會能夠得到基于 OpenGL 的 3D 渲染上下文以在 canvas 中進行 3D 繪圖。

與 SVG 不同，canvas 原生支持的基本圖形只有矩形一種，至于其他的圓形，多邊形等圖形則都由路徑來負責繪制實現。清單 1 展示了如何使用渲染上下文中的矩形繪圖方法完成了圖 1 所示圖形。

?

圖 1. 清單 1 對應的示例圖形

?

清單 1. 繪制 canvas 矩形

?

       function drawRect(){ 
 var canvas = document.getElementById('canvas'); 
 if (canvas.getContext){ 
 var ctx = canvas.getContext('2d');  // 獲取 2D 渲染上下文
		
 ctx.clearRect(0,0,300,200)  ;// 清除以（0,0）為左上坐標原點，300*200 矩形區域內所有像素
 ctx.fillStyle = '#00f';   // 設置矩形的填充屬性，#00f 代表藍色
 ctx.strokeStyle = '#f00';  // 設置矩形的線條顏色，#f00 代表紅色
 ctx.fillRect(50,25,150,80); // 使用 fillStyle 填充一個 150*80 大小的矩形
 ctx.strokeRect(45,20, 160, 90);  // 以 strokeStype 屬性為邊的顏色繪制一個無填充矩形
     } 
 }
    

?

繪制路徑

在開始動手繪制路徑之前，首先需要明確的是：矩形繪制 API 是一種即時性的 API，他會在相應的繪圖函數執行完畢之后，將圖形即時的渲染在畫面上。然而路徑繪制 API 并非如此，完整的路徑繪制過程大致可以分為如下兩個階段：

?

• 定義路徑輪廓：

在每個 canvas 實例對象中都擁有一個 path 對象，創建自定義圖形的過程就是不斷對 path 對象操作的過程。每當開始一次新的圖形繪制任務，都需要先使用 beginPath() 方法來重置 path 對象至初始狀態，進而通過一系列對 moveTo/lineTo 等畫線方法的調用，繪制期望的路徑，其中 moveTo(x, y) 方法設置繪圖起始坐標，而 lineTo(x,y) 等畫線方法可以從當前起點繪制直線，圓弧以及曲線到目標位置。最后一步，也是可選的步驟，是調用 closePath() 方法將自定義圖形進行閉合，該方法將自動創建一條從當前坐標到起始坐標的直線。

?

• 繪制路徑

定義完路徑的輪廓，此時 canvas 畫面中沒有顯示任何路徑，開發人員還可以對路徑進行修改。一旦確定完成，則需要繼續調用 stroke()/fill() 函數來完成將路徑渲染到畫面的最后一步。路徑的輪廓顏色和填充顏色由 strokeStyle 和 fillStyle 屬性決定。

清單 2 繪制一個圖 2 所示半圓弧，并通過 closePath() 方法完成圖形的閉合。

?

圖 2. 清單 2 對應的示例圖形

?

清單 2. 繪制 canvas 路徑

?

       function draw(){ 
 var canvas = document.getElementById('canvas'); 
	 if (canvas.getContext){ 
		 var ctx = canvas.getContext('2d'); 
 ctx.fillStyle = '#00f'; 
		 ctx.strokeStyle = '#f00'; 
		 ctx.beginPath(); 
 ctx.arc(75,75,30,0,Math.PI, false);  // 繪制一條半圓弧線
 ctx.closePath();    // 自動繪制一條直線來關閉弧線。若不調用此方法，將僅僅顯示一條半圓弧
 ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數，觀察圖形的變化
 ctx.stroke();  
	 } 
 }
    

?

二維變形

Canvas 繪圖中另一個重要的概念是 繪畫狀態（Drawing State） ，繪畫狀態反映了渲染上下文當前的瞬時狀態，開發人員可以通過對繪畫狀態的保存 / 恢復操作而快速的回到之前使用的各種屬性和變形操作。繪畫狀態主要由以下三個部分構成：

• 當前的變形矩陣（transformation matrix）
• 當前的裁剪區域（clipping region）
• 當前上下文中的屬性，比如 strokeStyle, fillType, globalAlpha, font 等等。

需要指出的是，當前路徑對象以及當前的位圖都不包含在繪畫狀態之中，路徑是持續性的對象，如前文所講，只有通過 beginPath() 操作才會進行重置，而位圖則是 canvas 的屬性，并非屬于渲染上下文的。

開發人員可以使用 save 和 restore 兩種方法來保存和恢復 canvas 狀態，每調用 save 方法，都會將當前狀態壓入堆棧中，而相應的 restore 方法則會從堆棧中彈出一個狀態，并將當前畫面恢復至該狀態。繪畫狀態在 canvas 圖形變形操作中應用極為廣泛，也非常重要，因為調用一個 restore 方法遠比手動恢復先前狀態要簡單許多，因而，一個較好的習慣是在做變形操作之前先保存 canvas 狀態。

二維繪圖的常用變形操作在 canvas 中都可到了很好的支持，包括平移（Translate），旋轉（Rotate），伸縮（Scale）等等。由于所有的變形操作都基于變形矩陣，因而開發人 員始終需要記住一點的就是，一旦沒有使用 save/restore 操作保持住原來的繪圖狀態，那么后續的繪圖操作，都會在當前所應用的變形狀態下完成。清單 3 使用平移和旋轉方法繪制了如下所示畫面。

?

圖 3. 清單 3 所示示例圖形

?

清單 3. 使用平移 / 旋轉變形方法繪制復雜位圖

?

       function drawPointCircle(){  
 var canvas = document.getElementById('canvas');  
	 if (canvas.getContext){ 
		 var ctx = canvas.getContext('2d');  
 ctx.translate(150,150);   // 將 canvas 的原點從 (0,0) 平移至（150,150）
 for (i=1;i<=2;i++){        // 繪制內外 2 層
 if ((i % 2) == 1) {ctx.fillStyle = '#00f';} 
 else{ ctx.fillStyle = '#f00'; } 
 ctx.save();             // 保持開始繪制每一層時的狀態一致
 for (j=0;j<=i*6;j++){   // 每層生成點的數量
 ctx.rotate(Math.PI/(3*i));  // 繞當前原點將坐標系順時針旋轉 Math.Pi/(3*i) 度
				 ctx.beginPath(); 
				 ctx.arc(0,20*i,5,0,Math.PI*2,true); 
 ctx.fill();         // 使用 fillType 值填充每個點
 } 
 ctx.restore();   
		 } 
	 } 
 }
    

?

像素級繪圖

像素級別的繪圖操作是 canvas 繪圖區別于 SVG，VML 等繪圖技術的最為明顯特征之一，渲染上下文提供了 createImageData, getImageData, 和 putImageData 三種方法來進行針對像素的操作，所基于的對象都是 imageData 對象。imageData 對象包含 width、height 和 data 三個屬性，其中 data 包含了 width × height × 4 個像素值，之所以乘以 4，在于每個像素都有 RGB 值和透明度 alpha 值。

清單 4 中所示代碼為上一節中示例圖形增添了簡單的顏色反轉濾鏡效果，通過調用 getImageData(x,y,width,height) 方法獲取以（x,y）為左上坐標的矩形區域內所有像素，而后對所有像素的 RGB 值做取反操作，最后通過 putImageData（imageData, x, y）將修改后的像素值重新繪制到在 canvas 上。

?

圖 4. 清單 4 所示示例圖形

?

清單 4. 實現簡單濾鏡效果

?

       function revertImage(){ 
 var canvas = document.getElementById('canvas'); 
 if (canvas.getContext){ 
 var context = canvas.getContext('2d'); 
 // 從指定的矩形區域獲取 canvas 像素數組
 var imgdata = context.getImageData(100, 100, 100, 100); 
 var pixels = imgdata.data; 

 // 遍歷每個像素并對 RGB 值進行取反
 for (var i=0, n=pixels.length; i<n; i+= 4){ 
      pixels[i] = 255-pixels[i]; 
       pixels[i+1] = 255-pixels[i+1]; 
       pixels[i+2] = 255-pixels[i+2]; 
 } 
 // 在指定位置進行像素重繪
 context.putImageData(imgdata, 100, 100); 
	 } 
 }
      
    

       <script type="text/javascript"> 
 var x=0,y=0,dx=2,dy=3,context2D;   // 小球從（0,0）開始移動，橫向步長為 2，縱向步長為 3 

 function draw(){ 
 context2D.clearRect(0, 0, canvas.width, canvas.height);   // 清除整個 canvas 畫面
 drawCircle(x, y);         // 使用自定義的畫圓方法，在當前（x,y）坐標出畫一個圓
	
 // 判斷邊界值，調整 dx/dy 以改變 x/y 坐標變化方向。
 if (x + dx > canvas.width || x + dx < 0) dx = -dx; 
 if (y + dy > canvas.height || y + dy < 0) dy = -dy; 
 x += dx; 
 y += dy; 
 } 

 window.onload = function (){ 
 var canvas = document.getElementById('canvas'); 
 context2D = canvas.getContext('2d'); 
 setInterval(draw, 20);     // 設置繪圖周期為 20 毫秒
 } 
 </script>
    

       <script type="text/javascript"> 
 var g_x,g_y;    // 鼠標當前的坐標
 var g_pointx, g_pointy;   // 藍色小球當前的坐標
	 var canvas; 
	
 function drawCircle(x,y){    // 以鼠標當前位置為原點繪制一個藍色小球
 var ctx = canvas.getContext('2d'); 
		 ctx.clearRect(0,0,300,300); 
		 ctx.fillStyle = '#00f'; 
		 ctx.beginPath(); 
		 ctx.arc(x,y,20,0,Math.PI*2,true); 
		 ctx.fill(); 
			
 g_pointx = x; 
		 g_pointy = y 
 } 
	
	 function onMouseMove(evt) { 
 // 獲取鼠標在 canvas 中的坐標位置
 if (evt.layerX || evt.layerX == 0) { // FireFox 
 g_x = evt.layerX; 
 g_y = evt.layerY; 
 } 
		 document.getElementById("xinfo").innerHTML = g_x; 
		 document.getElementById("yinfo").innerHTML = g_y; 
	 } 

	 function onKeyPress(evt) { 
 var dx = 3;  // 橫向平移步長
		 var kbinfo = document.getElementById("kbinfo"); 
		
 if (evt.keyCode == 39){   
			 kbinfo.innerHTML="right"; 
 if (g_x<300-dx) drawCircle(g_pointx+dx,g_pointy); 
 document.getElementById("xinfo").innerHTML = g_pointx; 
		 }else if (evt.keyCode == 37){ 
 kbinfo.innerHTML = "left"; 
			 if (g_x>dx) drawCircle(g_pointx-dx,g_pointy); 
 document.getElementById("xinfo").innerHTML = g_pointx; 
 } 
 } 
			
 window.onload = function(){ 
 canvas = document.getElementById('canvas'); 
 // 增加 canvas 節點對鼠標單擊，移動以及鍵盤事件的響應函數
 canvas.addEventListener('click', function(evt){drawCircle(g_x, g_y);} , false);
 canvas.addEventListener('mousemove', onMouseMove, false); 
 canvas.addEventListener('keypress', onKeyPress, false); 
 canvas.focus();  // 獲得焦點之后，才能夠對鍵盤事件進行捕獲
 } 
 </script>