document.getElementById("canvas").width = document.getElementById("canvas").width; 

簡單圖形繪制

基于 canvas 的繪圖并不是直接在 canvas 標(biāo)記所創(chuàng)建的繪圖畫面上進(jìn)行各種繪圖操作，而是依賴畫面所提供的 渲染上下文（Rendering Context），所有的繪圖命令和屬性都定義在渲染上下文當(dāng)中。在通過 canvas id 獲取相應(yīng)的 DOM 對象之后首先要做的事情就是獲取渲染上下文對象。 渲染上下文與 canvas 一一對應(yīng)，無論對同一 canvas 對象調(diào)用幾次 getContext() 方法，都將返回同一個(gè)上下文對象。目前，所有支持 canvas 標(biāo)簽的瀏覽器都支持 2D 渲染上下文，可以使用如下的代碼來獲取該對象。

 var context = document.getElementById("canvas").getContext("2d"); 

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

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

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

繪制路徑

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

• 定義路徑輪廓：

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

• 繪制路徑

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

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

				 
 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();    // 自動(dòng)繪制一條直線來關(guān)閉弧線。若不調(diào)用此方法，將僅僅顯示一條半圓弧
 ctx.fill();      // 可以嘗試注釋掉 fill 或者 stroke 函數(shù)，觀察圖形的變化
 ctx.stroke();  
	 } 
 } 

二維變形

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

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

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

開發(fā)人員可以使用 save 和 restore 兩種方法來保存和恢復(fù) canvas 狀態(tài)，每調(diào)用 save 方法，都會將當(dāng)前狀態(tài)壓入堆棧中，而相應(yīng)的 restore 方法則會從堆棧中彈出一個(gè)狀態(tài)，并將當(dāng)前畫面恢復(fù)至該狀態(tài)。繪畫狀態(tài)在 canvas 圖形變形操作中應(yīng)用極為廣泛，也非常重要，因?yàn)檎{(diào)用一個(gè) restore 方法遠(yuǎn)比手動(dòng)恢復(fù)先前狀態(tài)要簡單許多，因而，一個(gè)較好的習(xí)慣是在做變形操作之前先保存 canvas 狀態(tài)。

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

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

像素級繪圖

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

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

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

 // 遍歷每個(gè)像素并對 RGB 值進(jìn)行取反
 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]; 
 } 
 // 在指定位置進(jìn)行像素重繪
 context.putImageData(imgdata, 100, 100); 
	 } 
 } 

回頁首

實(shí)現(xiàn)動(dòng)畫效果

Canvas 并非為了制作動(dòng)畫而出現(xiàn)，自然沒有動(dòng)畫制作中幀的概念。因而，使用定時(shí)器不斷的重繪 canvas 畫面成為了實(shí)現(xiàn)動(dòng)畫效果的通用解決方式。Javascript 中的 setInterval(code，millisec) 方法可以按照指定的時(shí)間間隔 millisec 來反復(fù)調(diào)用 code 所指向的函數(shù)或代碼串，這樣，通過將繪圖函數(shù)作為第一個(gè)參數(shù)傳給 setInterval 方法，在每次被調(diào)用的過程中移動(dòng)畫面中圖形的位置，來最終達(dá)到一種動(dòng)畫的體驗(yàn)。需要注意的一點(diǎn)是，雖然 setinterval 方法的第二個(gè)參數(shù)允許開發(fā)人員對繪圖函數(shù)的調(diào)用頻率進(jìn)行設(shè)定，但這始終都是一種最為理想的情況，由于這種繪圖頻率很大程度上取決于支持 canvas 的底層 JavaScript 引擎的渲染速度以及相應(yīng)繪圖函數(shù)的復(fù)雜性，因而實(shí)際運(yùn)行的結(jié)果往往都是要慢于指定繪圖頻率的。

清單 5 顯示了一個(gè)小彈力球動(dòng)畫效果，在球沒有到達(dá)四周邊界時(shí)，繪圖方法不斷的移動(dòng)所繪小球的橫縱坐標(biāo)。并且，在每次重繪之前，都是用 clear 方法將之前的畫面清除。

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

 function draw(){ 
 context2D.clearRect(0, 0, canvas.width, canvas.height);   // 清除整個(gè) canvas 畫面
 drawCircle(x, y);         // 使用自定義的畫圓方法，在當(dāng)前（x,y）坐標(biāo)出畫一個(gè)圓
	
 // 判斷邊界值，調(diào)整 dx/dy 以改變 x/y 坐標(biāo)變化方向。
 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);     // 設(shè)置繪圖周期為 20 毫秒
 } 
 </script> 

回頁首

提高可訪問性

一款優(yōu)秀的 Web 應(yīng)用必須要做到的就是提供給用戶很好的可訪問性，這包括對鼠標(biāo)，鍵盤以及快捷鍵等操作的響應(yīng)，canvas 畫面的本質(zhì)仍是一個(gè) DOM 節(jié)點(diǎn)，因而開發(fā)人員可以通過常規(guī)的方法來處理響應(yīng)。這里，與基于 SVG 的繪圖不同，由于 SVG 是一種基于 XML 的聲明式的繪圖方式，因而，SVG 中任何的圖形都可以作為一個(gè)獨(dú)立的 DOM 節(jié)點(diǎn)去接收并響應(yīng)特定事件，而 canvas 由于其像素繪圖的本質(zhì)，則只可以在 canvas 元素節(jié)點(diǎn)去處理。

圖 5 所示示例代碼，當(dāng)鼠標(biāo)在 canvas 中移動(dòng)時(shí)，鼠標(biāo)當(dāng)前相對于 canvas 中的橫縱坐標(biāo)將實(shí)時(shí)輸出到上方提示信息區(qū)域；當(dāng)用戶在 canvas 中單擊鼠標(biāo)左鍵，將在相應(yīng)位置創(chuàng)建一個(gè)藍(lán)色小球，而后用戶可以通過鍵盤上的左 / 右方向鍵對藍(lán)色小球進(jìn)行控制，使其進(jìn)行橫向的移動(dòng)。示例代碼如清單 6 所示。

				 
 <script type="text/javascript"> 
 var g_x,g_y;    // 鼠標(biāo)當(dāng)前的坐標(biāo)
 var g_pointx, g_pointy;   // 藍(lán)色小球當(dāng)前的坐標(biāo)
	 var canvas; 
	
 function drawCircle(x,y){    // 以鼠標(biāo)當(dāng)前位置為原點(diǎn)繪制一個(gè)藍(lán)色小球
 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) { 
 // 獲取鼠標(biāo)在 canvas 中的坐標(biāo)位置
 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 節(jié)點(diǎn)對鼠標(biāo)單擊，移動(dòng)以及鍵盤事件的響應(yīng)函數(shù)
		 canvas.addEventListener('click', function(evt){drawCircle(g_x, g_y);} , false);
|-------10--------20--------30--------40--------50--------60--------70--------80--------9|
|-------- XML error:  The previous line is longer than the max of 90 characters ---------|
		 canvas.addEventListener('mousemove', onMouseMove, false); 
 canvas.addEventListener('keypress', onKeyPress, false); 
 canvas.focus();  // 獲得焦點(diǎn)之后，才能夠?qū)︽I盤事件進(jìn)行捕獲
 } 
 </script> 

這里我們對鼠標(biāo)的移動(dòng)，單擊操作進(jìn)行響應(yīng)，在實(shí)際應(yīng)用中可以視特定應(yīng)用的需求，增加對鼠標(biāo)摁下，松開或雙擊等更為豐富操作的響應(yīng)，增強(qiáng)應(yīng)用的可訪問性。

細(xì)心的讀者可能發(fā)現(xiàn)，在通過不斷重繪畫面以達(dá)到動(dòng)畫效果的過程中，我們的重繪方法首先做的事情都是調(diào)用 clearRect(x, y, width, height) 方法將原畫面清空，這種銷毀而后重繪的方式丟失了之前的畫面，使得開發(fā)人員不得不重繪整幅畫面，這在性能上是難以接受的，一種可行的做法是通過多個(gè) canvas 疊加的方式，根據(jù)不同 canvas 上的不同刷新頻率，分別完成各自的重繪任務(wù)。這種多 canvas 技巧，在處理繪圖類應(yīng)用中最為常見的“撤銷”操作時(shí)也非常有效，所有的繪圖都發(fā)生在上層 canvas，只有被用戶確認(rèn)的畫面，才會被繪制到底層 canvas 上。鑒于本文所討論技術(shù)范圍，這里不做過多講解，有興趣的讀者可以通過本文參考文獻(xiàn)所列資源，進(jìn)行進(jìn)一步的深入學(xué)習(xí)。

回頁首

總結(jié)

本文對 HTML5 新引入的 canvas 元素在 Web 繪圖中所扮演的角色和所發(fā)揮的作用做了最基本的介紹，其中包括使用 canvas 完成基本的 Web 繪圖，動(dòng)畫和交互任務(wù)，雖然 Flash，Silverlight 也都可以完成相同的任務(wù)，甚至在性能上更勝一籌，但是作為一種不依賴任何插件的標(biāo)準(zhǔn) Web 像素級繪圖技術(shù)，我們有理由相信隨著各大瀏覽器廠商的加入，canvas 將會更加成熟完善，也會有更多基于 canvas 的繪圖類應(yīng)用不斷涌現(xiàn)。

回頁首

聲明

本人所發(fā)表的內(nèi)容僅為個(gè)人觀點(diǎn)，不代表 IBM 公司立場、戰(zhàn)略和觀點(diǎn)。

參考資料

學(xué)習(xí)

• 查看 HTML5 專題，了解更多和 HTML5 相關(guān)的知識和動(dòng)向。
  
  
• 查看 Mozilla 開發(fā)者中心，了解更多 HTML5 canvas 知識。
  
  
• 查看 WhatWG 制定的關(guān)于 HTML5 canvas 規(guī)范，了解更多底層繪圖 API。
  
  
• 查看 Opera 開發(fā)者中心，了解如何使用 canvas 創(chuàng)建 Web 繪圖類應(yīng)用。
  
  
• 通過 結(jié)合 GFX, DnD 與 Dijit 創(chuàng)建基于 Dojo 的 Web 圖形類應(yīng)用，了解如何基于 SVG 和 Dojo 構(gòu)建 Web 繪圖類應(yīng)用。
  
  
• 訪問 這里，查看更多基于 HTML5 canvas 構(gòu)建的精彩示例。
  
  
• developerWorks Web development 專區(qū)：通過專門關(guān)于 Web 技術(shù)的文章和教程，擴(kuò)展您在網(wǎng)站開發(fā)方面的技能。
  
  
• developerWorks Ajax 資源中心：這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
  
  
• developerWorks Web 2.0 資源中心，這是有關(guān) Web 2.0 相關(guān)信息的一站式中心，包括大量 Web 2.0 技術(shù)文章、教程、下載和相關(guān)技術(shù)資源。您還可以通過 Web 2.0 新手入門 欄目，迅速了解 Web 2.0 的相關(guān)概念。
  
  

討論

• 加入 My developerWorks 中文社區(qū) 
  
  

關(guān)于作者