亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML5 Canvas繪制文本及圖片的基礎教程

CodePlayer   發(fā)布時間：2016-03-14 12:09:20   作者：佚名   我要評論
這篇文章主要介紹了HTML5 Canvas繪制文本及圖片的基礎教程, 通過Canvas我們就可以用JavaScript制作出程序代碼可以輕松控制的文本和圖片數(shù)據(jù),需要的朋友可以參考下

繪制文本

在HTML5中，我們還可以在Canvas「畫布」上繪制我們所需的文本文字，其中所涉及到的CanvasRenderingContext2D對象的主要屬性和方法如下：

屬性或方法 基本描述
font 設置繪制文字所使用的字體，例如20px 宋體，默認值為10px sans-serif。該屬性的用法與css font屬性一致，例如italic bold 14px/30px Arial,宋體
fillStyle 用于設置畫筆填充路徑內(nèi)部的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象
strokeStyle 用于設置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個表示CSS顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象
fillText(string text, int x, int y[, int maxWidth]) 從指定坐標點位置開始繪制填充的文本文字。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過該參數(shù)設置，則會自動按比例縮小字體以適應寬度。與本方法對應的樣式設置屬性為fillStyle。
strokeText(string text, int x, int y[, int maxWidth]) 從指定坐標點位置開始繪制非填充的文本文字(文字內(nèi)部是空心的)。參數(shù)maxWidth是可選的，如果文本內(nèi)容寬度超過該參數(shù)設置，則會自動按比例縮小字體以適應寬度。該方法與fillText()用法一致，不過strokeText()繪制的文字內(nèi)部是非填充(空心)的，fillText()繪制的文字是內(nèi)部填充(實心)的。與本方法對應的樣式設置屬性為strokeStyle。

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

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

JavaScript Code復制內(nèi)容到剪貼板
  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.     ctx.font = "30px Courier New";   
  24.     //設置字體填充顏色   
  25.     ctx.fillStyle = "blue";   
  26.     //從坐標點(50,50)開始繪制文字   
  27.     ctx.fillText("CodePlayer+中文測試", 50, 50);   
  28. }   
  29. </script>   
  30. </body>   
  31. </html>  

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

接著，我們使其他環(huán)境條件均保持不變，再次使用strokeText()+strokeStyle方式來繪制上述示例中的文字，對應的JavaScript代碼如下：

JavaScript Code復制內(nèi)容到剪貼板
  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.     ctx.font = "30px Courier New";   
  11.     //設置字體顏色   
  12.     ctx.strokeStyle = "blue";   
  13.     //從坐標點(50,50)開始繪制文字   
  14.     ctx.strokeText("CodePlayer+中文測試", 50, 50);   
  15. }   
  16. </script>  

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


繪制圖片
在html5中，除了利用canvas繪制矢量圖形之外，我們還可以在canvas「畫布」上繪制現(xiàn)有的圖像文件。

首先，我們來看看使用canvas繪制圖像文件需要用到CanvasRenderingContext2D對象的哪些主要屬性和方法：

XML/HTML Code復制內(nèi)容到剪貼板
  1. drawImage(mixed image, int x, int y)  

以canvas上指定的坐標點開始，按照圖像的原始尺寸大小繪制整個圖像。這里的image可以是Image對象，也可以是Canvas對象(下同)。

XML/HTML Code復制內(nèi)容到剪貼板
  1. drawImage(mixed image, int x, int y, int width, int height)  

以canvas上指定的坐標點開始，以指定的大小(width和height)繪制整個圖像，圖像將根據(jù)指定的尺寸自動進行相應的縮放。
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的矩形區(qū)域中
是的，你沒有看錯。要在canvas中繪制圖像，我們可以使用一個名為drawImage()的方法，不過該方法具有三種不同的變體，每個方法變體允許接收的參數(shù)不僅數(shù)量不同，連參數(shù)的含義也不盡相同。

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

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

JavaScript Code復制內(nèi)容到剪貼板
  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.     //創(chuàng)建新的圖片對象   
  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>  

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

由于Google的Logo圖像過大，超過了canvas的尺寸范圍，因此只能顯示出圖像的一部分。此時，我們使用第2個變體將Google的logo圖像縮小到指定的寬度和高度，并繪制到canvas中。

JavaScript Code復制內(nèi)容到剪貼板
  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.     //創(chuàng)建新的圖片對象   
  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中看到整個圖像了：
2016314120208134.png (417×311)

最后，我們使用第三個方法變體將Google logo中的"Goo"部分圖像繪制到canvas中("Goo"部分的圖像大小可以使用Photoshop等工具測量得出，這里直接使用測量后的結果)。

JavaScript Code復制內(nèi)容到剪貼板
  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.     //創(chuàng)建新的圖片對象   
  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的矩形區(qū)域  
  18.          *  
  19.          * canvas繪制圖像的目標區(qū)域的寬度和高度與截取的部分圖像尺寸保持一致，  
  20.          * 就表示不進行縮放，以原始尺寸截取部分圖像  
  21.          */           
  22.         ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);                
  23.     };   
  24. }   
  25. </script>  

此時，我們就可以看到canvas中顯示的"Goo"局部圖像了：
2016314120226874.png (418×311)

相關文章

  • html/css基礎篇——html代碼編寫過程中的幾個警惕點(必看)

    下面小編就為大家?guī)硪黄猦tml/css基礎篇——html代碼編寫過程中的幾個警惕點(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • html、css基礎注意點(前端必看篇)

    下面小編就為大家?guī)硪黄猦tml、css基礎注意點(前端必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • HTML CSS樣式基礎(必看篇)

    下面小編就為大家?guī)硪黄狧TML CSS樣式基礎(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-23

  • HTML基礎總結推薦(段落)

    下面小編就為大家?guī)硪黄狧TML基礎總結推薦(段落)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-13

  • HTML基礎知識——css樣式表,樣式屬性,格式與布局詳解

    下面小編就為大家?guī)硪黄狧TML基礎知識——css樣式表,樣式屬性,格式與布局詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎知識——設置超鏈接的樣式簡單實例

    下面小編就為大家?guī)硪黄狧TML基礎知識——設置超鏈接的樣式簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎必看——全面了解css樣式表

    下面小編就為大家?guī)硪黄狧TML基礎必看——全面了解css樣式表。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-11

  • HTML基礎必看---表單,圖片熱點,網(wǎng)頁劃區(qū)和拼接詳解

    下面小編就為大家?guī)硪黄狧TML基礎必看---表單,圖片熱點,網(wǎng)頁劃區(qū)和拼接詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-10

  • HTML基礎重點_一般標簽、常用標簽和表格

    下面小編就為大家?guī)硪黄狧TML基礎重點_一般標簽、常用標簽和表格。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-09

  • 淺談HTML（css基礎樣式）

    下面小編就為大家?guī)硪黄獪\談HTML（css基礎樣式）。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-27

最新評論