注意：本文屬於《html5 Canvas繪制圖形入門詳解》系列文章中的一部分。如果你是html5初學者，僅僅閱讀本文，可能無法較深入的理解canvas，甚至無法順暢地通讀本文。請點擊上述鏈接以了解使用html5 canvas繪制圖形的完整內容。
在html5中，除了利用canvas繪制矢量圖形之外，我們還可以在canvas「畫布」上繪制現有的圖像文件。
首先，我們來看看使用canvas繪制圖像文件需要用到CanvasRenderingContext2D對象的哪些主要屬性和方法：
- drawImage(mixed image, int x, int y)
-
以canvas上指定的坐標點開始，按照圖像的原始尺寸大小繪制整個圖像。這里的
image可以是Image對象，也可以是Canvas對象(下同)。 - drawImage(mixed image, int x, int y, int width, int height)
-
以canvas上指定的坐標點開始，以指定的大小(
width和height)繪制整個圖像，圖像將根據指定的尺寸自動進行相應的縮放。 - drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
-
將指定圖像的局部圖像(以
(imageX, imageY)為左上角、寬度為imageWidth、高度為imageHeight的矩形部分)繪制到canvas中以(canvasX,canvasY)為左上角坐標、寬度為canvasWidth、高度為canvasHeight的矩形區域中
是的，你沒有看錯。要在canvas中繪制圖像，我們可以使用一個名為drawImage()的方法，不過該方法具有三種不同的變體，每個方法變體允許接收的參數不僅數量不同，連參數的含義也不盡相同。
在這里，我們對上述三個變體分別舉例說明。
首先，我們使用drawImage()的第一個變體在canvas上繪制Google的logo圖片(原始尺寸為550 x 190)。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 Canvas繪制圖像入門示例</title> 6 </head> 7 <body> 8 9 <!-- 添加canvas標簽，並加上紅色邊框以便於在頁面上查看 --> 10 <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 11 您的瀏覽器不支持canvas標簽。 12 </canvas> 13 14 <script type="text/javascript"> 15 //獲取Canvas對象(畫布) 16 var canvas = document.getElementById("myCanvas"); 17 //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤 18 if(canvas.getContext){ 19 //獲取對應的CanvasRenderingContext2D對象(畫筆) 20 var ctx = canvas.getContext("2d"); 21 22 //創建新的圖片對象 23 var img = new Image(); 24 //指定圖片的URL 25 img.src = "http://www.365mini.com/image/google_logo.png"; 26 //瀏覽器加載圖片完畢后再繪制圖片 27 img.onload = function(){ 28 //以Canvas畫布上的坐標(10,10)為起始點，繪制圖像 29 ctx.drawImage(img, 10, 10); 30 }; 31 } 32 </script> 33 </body> 34 </html>
對應的顯示效果如下：
使用canvas繪制Google的logo圖像
由於Google的Logo圖像過大，超過了canvas的尺寸范圍，因此只能顯示出圖像的一部分。此時，我們使用第2個變體將Google的logo圖像縮小到指定的寬度和高度，並繪制到canvas中
1 <script type="text/javascript"> 2 //獲取Canvas對象(畫布) 3 var canvas = document.getElementById("myCanvas"); 4 //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤 5 if(canvas.getContext){ 6 //獲取對應的CanvasRenderingContext2D對象(畫筆) 7 var ctx = canvas.getContext("2d"); 8 9 //創建新的圖片對象 10 var img = new Image(); 11 //指定圖片的URL 12 img.src = "http://www.365mini.com/image/google_logo.png"; 13 //瀏覽器加載圖片完畢后再繪制圖片 14 img.onload = function(){ 15 //以Canvas畫布上的坐標(10,10)為起始點，繪制圖像 16 //圖像的寬度和高度分別縮放到350px和100px 17 ctx.drawImage(img, 10, 10, 350, 100); 18 }; 19 } 20 </script>
我們將Google的logo圖像進行縮放后，此時就可以在canvas中看到整個圖像了
canvas-draw-image-2.png
最后，我們使用第三個方法變體將Google logo中的"Goo"部分圖像繪制到canvas中("Goo"部分的圖像大小可以使用Photoshop等工具測量得出，這里直接使用測量后的結果)。
1 <script type="text/javascript"> 2 //獲取Canvas對象(畫布) 3 var canvas = document.getElementById("myCanvas"); 4 //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤 5 if(canvas.getContext){ 6 //獲取對應的CanvasRenderingContext2D對象(畫筆) 7 var ctx = canvas.getContext("2d"); 8 9 //創建新的圖片對象 10 var img = new Image(); 11 //指定圖片的URL 12 img.src = "http://www.365mini.com/image/google_logo.png"; 13 //瀏覽器加載圖片完畢后再繪制圖片 14 img.onload = function(){ 15 /* 16 * 將圖像左側的"Goo"部分(即以坐標(0,0)為左上角坐標、寬度為332px、高度為190px的部分圖像) 17 * 繪制到canvas中以坐標(10,10)為左上角、寬度為332px、高度為190px的矩形區域 18 * 19 * canvas繪制圖像的目標區域的寬度和高度與截取的部分圖像尺寸保持一致， 20 * 就表示不進行縮放，以原始尺寸截取部分圖像 21 */ 22 ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190); 23 }; 24 } 25 </script>
此時，我們就可以看到canvas中顯示的"Goo"局部圖像了：
使用canvas繪制Google logo的