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

借助HTML5 Canvas來(lái)繪制三角形和矩形等多邊形的方法

CodePlayer   發(fā)布時(shí)間：2016-03-14 11:26:52   作者：佚名   我要評(píng)論
這篇文章主要介紹了借助HTML5 Canvas來(lái)繪制三角形和矩形等多邊形的方法,通過(guò)文章開頭給的一些屬性及下面三角形和矩形的例子,同理便可得出其他多邊形的畫法,需要的朋友可以參考下

使用HTML5 Canvas繪制多邊形所需的CanvasRenderingContext2D對(duì)象的主要屬性和方法(有「()」者為方法)如下：

屬性或方法 基本描述
strokeStyle 用于設(shè)置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個(gè)表示css顏色值的字符串。如果你的繪制需求比較復(fù)雜，該屬性的值還可以是一個(gè)CanvasGradient對(duì)象或者CanvasPattern對(duì)象
globalAlpha 定義繪制內(nèi)容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之間，默認(rèn)值為1.0。
lineWidth 定義繪制線條的寬度。默認(rèn)值是1.0，并且這個(gè)屬性必須大于0.0。較寬的線條在路徑上居中，每邊各有線條寬的一半。
lineCap 指定線條兩端的線帽如何繪制。合法的值是 butt、round和square。默認(rèn)值是"butt"。
beginPath() 開始一個(gè)新的繪制路徑。每次繪制新的路徑之前記得調(diào)用該方法。
moveTo(int x, int y) 定義一個(gè)新的繪制路徑的起點(diǎn)坐標(biāo)
lineTo(int x, int y) 定義一個(gè)繪制路徑的中間點(diǎn)坐標(biāo)
stroke(int x, int y) 沿著繪制路徑的坐標(biāo)點(diǎn)順序繪制直線
closePath() 如果當(dāng)前的繪制路徑是打開的，則閉合該繪制路徑。

繪制三角形

JavaScript Code復(fù)制內(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標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>   
  13.   
  14.   
  15. <script type="text/javascript">   
  16. //獲取Canvas對(duì)象(畫布)   
  17. var canvas = document.getElementById("myCanvas");   
  18. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  19. if(canvas.getContext){     
  20.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)   
  21.     var ctx = canvas.getContext("2d");     
  22.        
  23.     //開始一個(gè)新的繪制路徑   
  24.     ctx.beginPath();   
  25.     //設(shè)置線條顏色為藍(lán)色   
  26.     ctx.strokeStyle = "blue";   
  27.     //設(shè)置路徑起點(diǎn)坐標(biāo)   
  28.     ctx.moveTo(20, 50);   
  29.     //繪制直線線段到坐標(biāo)點(diǎn)(60, 50)   
  30.     ctx.lineTo(20, 100);   
  31.     //繪制直線線段到坐標(biāo)點(diǎn)(60, 90)   
  32.     ctx.lineTo(70, 100);       
  33.     //先關(guān)閉繪制路徑。注意，此時(shí)將會(huì)使用直線連接當(dāng)前端點(diǎn)和起始端點(diǎn)。   
  34.     ctx.closePath();   
  35.     //最后，按照繪制路徑畫出直線   
  36.     ctx.stroke();   
  37. }   
  38. </script>   
  39. </body>   
  40. </html>     

對(duì)應(yīng)的顯示效果如下：
2016314112438272.png (421×318)

繪制矩形
之所以將Canvas繪制矩形單獨(dú)提出來(lái)，是因?yàn)镃anvas的畫筆工具——CanvasRenderingContext2D對(duì)象為繪制矩形提供了專用的方法。

XML/HTML Code復(fù)制內(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標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->  
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">  
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>  
  13.   
  14. <script type="text/javascript">  
  15. //獲取Canvas對(duì)象(畫布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  18. if(canvas.getContext){     
  19.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)   
  20.     var ctx = canvas.getContext("2d");     
  21.        
  22.     //開始一個(gè)新的繪制路徑   
  23.     ctx.beginPath();   
  24.     //設(shè)置線條顏色為藍(lán)色   
  25.     ctx.strokeStyle = "blue";   
  26.     //以canvas中的坐標(biāo)點(diǎn)(10,10)作為繪制起始點(diǎn)，繪制一個(gè)寬度為80px、高度為50px的矩形   
  27.     ctx.rect(10, 10, 80, 50);   
  28.     //按照指定的路徑繪制直線   
  29.     ctx.stroke();   
  30.     //關(guān)閉繪制路徑   
  31.     ctx.closePath();   
  32. }   
  33. </script>  
  34. </body>  
  35. </html>  

對(duì)應(yīng)的矩形效果顯示如下：
2016314112508746.png (422×310)

相關(guān)文章

  • 詳解canvas多邊形(蜘蛛圖)的畫法示例

    這篇文章主要介紹了詳解canvas多邊形(蜘蛛圖)的畫法示例的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-29

最新評(píng)論