社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > HTML5 Canvas繪製文字及圖片的基礎教學_html5教學技巧

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

WBOY
發布： 2016-05-16 15:51:51
原創
1517 人瀏覽過

繪製文字

在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. HTML5 Canvas繪製文字文字入門範例   
  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";
    21.        
    22.     
  22. //設定字體樣式   
    23.     ctx.font = 
  23. "30px Courier New";   
    24.     
  24. //設定字型填色   
    25.     ctx.fillStyle = 
  25. "blue";   
    26.     
  26. //從座標點(50,50)開始繪製文字   
    27.     ctx.fillText(
  27. "CodePlayer 中文測驗", 50, 50);   
    28. }   
    29.   
    30.   
    31.   

對應的顯示效果如下：
2016314115913647.png (417×319)

接著，我們使其他環境條件都保持不變，再次使用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. //設定字體顏色
  11.        ctx.strokeStyle = 
    12. "blue"
  12. ;        
    13. //從座標點(50,50)開始繪製文字
  13.        ctx.strokeText(
    14. "CodePlayer 中文測驗"
  14. , 50, 50);    }   
  15.   
我們再次使用瀏覽器訪問頁面，將會看到如下顯示效果(效果圖片中的"CodePlayer"字樣其實也是空心的，只是由於字體較小導致兩側看起來重疊在了一起)：


2016314115932550.png (415×313)

繪製圖片


在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)  

    2. 以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. HTML5 Canvas繪製影像入門範例   
    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";
      21.        
      22.     
    22. //建立新的圖片物件   
      23.     
    23. var img = new     
      24. //指定圖片的網址
    24.        img.src = 
      25. "http://www.365mini.com/image/google_logo.png"
    25. ;   ;   ;   
      26. ;       //瀏覽器載入圖片完成後再繪製圖片   
    26.     img.onload = function(){   
    27.         //以Canvas畫布上的座標(10,10)為起始點，繪製影像   
    28.         ctx.drawImage(img, 10, 10);             與
      29.     };   
      30. }   
      31.   
      32.   
      33.   

    對應的顯示效果如下：
    2016314120148169.png (421×312)

    由於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);       
      18.     };   
      19. }   
      20.   
    我們將Google的logo影像進行縮放後，此時就可以在canvas中看到整個影像了：


    2016314120208134.png (417×311)最後，我們使用第三個方法變體將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); 🎜>
      22.     };   
      23. }   
      24.   
    25. 此時，我們就可以看到canvas中顯示的"Goo"局部影像了：
相關標籤：
canvas html5 圖片 文字
來源：php.cn
上一篇：HTML5開啟本機app應用的方法_html5教學技巧 下一篇：如何在網站上新增Google定位資訊_html5教學技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板