HTML5 Canvas繪製文字及圖片的基礎教學_html5教學技巧

繪製文字

在HTML5中，我們也可以在Canvas「畫布」上繪製我們所需的文字文字，其中所涉及的CanvasRenderingContext2D物件的主要屬性和方法如下：

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

從上面的API描述資訊中我們可以得知，在Canvas中可以使用兩種方式來繪製文字文字：一種是使用fillText() fillStyle來繪製填充(實心)的文字；一種是使用strokeText () strokeStyle繪製非填充(空心)的文字。

下面，我們先來看看如何使用canvas繪製實心文字，具體html程式碼如下：

JavaScript Code複製內容到剪貼簿

1. html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7.   
8.   
9.   
10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
11. 您的瀏覽器不支援canvas標籤。   
12.   
13.   
15. //取得Canvas物件(畫布)   
16. var canvas = document.getElementById("myCanvas"
17. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
18. if(canvas.getContext){     
19.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
20.     var ctx = canvas.getContext("2d";
       
    
22. //設定字體樣式   
    ctx.font = 
23. "30px Courier New";   
    
24. //設定字型填色   
    ctx.fillStyle = 
25. "blue";   
    
26. //從座標點(50,50)開始繪製文字   
    ctx.fillText(
27. "CodePlayer 中文測驗", 50, 50);   
}   
  
  
  

對應的顯示效果如下：

接著，我們使其他環境條件都保持不變，再次使用strokeText() strokeStyle方式來繪製上述範例中的文字，對應的JavaScript程式碼如下：

JavaScript Code複製內容到剪貼簿

1. <script><span class="string">"text/javascript"</script>>   
2. //取得Canvas物件(畫布)   
3. var canvas = document.getElementById("myCanvas"
4. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
5. if(canvas.getContext){     
6.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
7.     var ctx = canvas.getContext(        
8.     //設定字體樣式
9.        ctx.font = "30px Courier New"
10. ;        
//設定字體顏色
11.        ctx.strokeStyle = 
"blue"
12. ;        
//從座標點(50,50)開始繪製文字
13.        ctx.strokeText(
"CodePlayer 中文測驗"
14. , 50, 50);    }   
15.   

我們再次使用瀏覽器訪問頁面，將會看到如下顯示效果(效果圖片中的"CodePlayer"字樣其實也是空心的，只是由於字體較小導致兩側看起來重疊在了一起)：

繪製圖片

在html5中，除了利用canvas繪製向量圖形之外，我們還可以在canvas「畫布」上繪製現有的圖片檔案。
首先，讓我們來看看使用canvas繪製圖像檔案需要用到CanvasRenderingContext2D物件的哪些主要屬性和方法：

XML/HTML Code

複製內容到剪貼簿

drawImage(mixed image, int x, int y)  

以canvas上指定的座標點開始，依照影像的原始尺寸大小繪製整個影像。這裡的image可以是Image對象，也可以是Canvas物件(下同)。

XML/HTML Code

複製內容到剪貼簿

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)
將指定為左圖片上的局部圖片(image)角、寬度為imageWidth、高度為imageHeight的矩形部分)繪製到canvas中以(canvasX,canvasY)為左上角座標、寬度為canvasWidth、高度為canvasHeight的矩形區域中
是的，你沒有看錯。要在canvas中繪製影像，我們可以使用一個名為drawImage()的方法，不過該方法具有三種不同的變體，每個方法變體允許接收的參數不僅數量不同，連參數的含義也不盡相同。

在這裡，我們對上述三個變體分別舉例說明。

首先，我們使用drawImage()的第一個變體在canvas上繪製Google的logo圖片(原始尺寸為550 x 190)。

JavaScript Code複製內容到剪貼簿
1. html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7.   
8.   
9.   
10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
11. 您的瀏覽器不支援canvas標籤。   
12.   
13.   
15. //取得Canvas物件(畫布)   
16. var canvas = document.getElementById("myCanvas"
17. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
18. if(canvas.getContext){     
19.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
20.     var ctx = canvas.getContext("2d";
       
    
22. //建立新的圖片物件   
    
23. var img = new     
//指定圖片的網址
24.        img.src = 
"http://www.365mini.com/image/google_logo.png"
25. ;   ;   ;   
;       //瀏覽器載入圖片完成後再繪製圖片   
26.     img.onload = function(){   
27.         //以Canvas畫布上的座標(10,10)為起始點，繪製影像   
28.         ctx.drawImage(img, 10, 10);             與
    };   
}   
  
  
  
對應的顯示效果如下：

由於Google的Logo影像過大，超過了canvas的尺寸範圍，因此只能顯示出影像的一部分。此時，我們使用第2個變體將Google的logo影像縮小到指定的寬度和高度，並繪製到canvas中。
JavaScript Code複製內容到剪貼簿
1. <script><span class="string">"text/javascript"</script>>   
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     //指定圖片的網址
11.        img.src = "http://www.365mini.com/image/google_logo.png"
12. ;   ;   ;   ;   
13.     //瀏覽器載入圖片完成後再繪製圖片   
14.     img.onload = function(){   
15.         //以Canvas畫布上的座標(10,10)為起始點，繪製影像   
16.         //影像的寬度和高度分別縮放至350px和100px   
17.         ctx.drawImage(img, 10, 10, 350, 100);       
    };   
}   
  
我們將Google的logo影像進行縮放後，此時就可以在canvas中看到整個影像了：

最後，我們使用第三個方法變體將Google logo中的"Goo"部分圖像繪製到canvas中("Goo"部分的圖像大小可以使用Photoshop等工具測量得出，這裡直接使用測量後的結果)。
JavaScript Code
複製內容到剪貼簿
1. <script><span class="string">"text/javascript"</script>>   
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     //指定圖片的網址
11.        img.src = "http://www.365mini.com/image/google_logo.png"
12. ;   ;   ;   ;   
13.     //瀏覽器載入圖片完成後再繪製圖片   
14.     img.onload = function(){   
15.         /*  
16.          * 將影像左側的"Goo"部分(即以座標(0,0)為左上角座標、寬度為332px、高度為190px的部分影像)
17.          * 繪製在canvas中以座標(10,10)為左上角、寬度為332px、高度為190px的長方形區域  
18.          *  
19.          * canvas繪製影像的目標區域的寬度與高度與截取的部分影像尺寸一致，且  
20.          * 就表示不進行縮放，以原始尺寸截取部分影像  
21.          */                 ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332,190); 🎜>
    };   
}   
  
25. 此時，我們就可以看到canvas中顯示的"Goo"局部影像了：