溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么用HTML5 Canvas繪制三角形和矩形等多邊形

發(fā)布時(shí)間：2021-08-10 14:40:35 來源：億速云 閱讀：171 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么用HTML5 Canvas繪制三角形和矩形等多邊形”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

使用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)簽，并加上紅色邊框以便于在頁面上查看 -->   

  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的瀏覽器中提示語法錯(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)的顯示效果如下：
怎么用HTML5 Canvas繪制三角形和矩形等多邊形

繪制矩形
之所以將Canvas繪制矩形單獨(dú)提出來，是因?yàn)镃anvas的畫筆工具&mdash;&mdash;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)簽，并加上紅色邊框以便于在頁面上查看 -->  

  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的瀏覽器中提示語法錯(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)的矩形效果顯示如下：
怎么用HTML5 Canvas繪制三角形和矩形等多邊形

“怎么用HTML5 Canvas繪制三角形和矩形等多邊形”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手