溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么用HTML5 Canvas繪制三角形和矩形等多邊形”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
使用HTML5 Canvas繪制多邊形所需的CanvasRenderingContext2D對象的主要屬性和方法(有「()」者為方法)如下：
| 屬性或方法 | 基本描述 |
|---|---|
| strokeStyle | 用于設置畫筆繪制路徑的顏色、漸變和模式。該屬性的值可以是一個表示css顏色值的字符串。如果你的繪制需求比較復雜，該屬性的值還可以是一個CanvasGradient對象或者CanvasPattern對象 |
| globalAlpha | 定義繪制內容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之間，默認值為1.0。 |
| lineWidth | 定義繪制線條的寬度。默認值是1.0，并且這個屬性必須大于0.0。較寬的線條在路徑上居中，每邊各有線條寬的一半。 |
| lineCap | 指定線條兩端的線帽如何繪制。合法的值是 butt、round和square。默認值是"butt"。 |
| beginPath() | 開始一個新的繪制路徑。每次繪制新的路徑之前記得調用該方法。 |
| moveTo(int x, int y) | 定義一個新的繪制路徑的起點坐標 |
| lineTo(int x, int y) | 定義一個繪制路徑的中間點坐標 |
| stroke(int x, int y) | 沿著繪制路徑的坐標點順序繪制直線 |
| closePath() | 如果當前的繪制路徑是打開的，則閉合該繪制路徑。 |
繪制三角形
JavaScript Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制三角形入門示例</title>
</head>
<body>
<!-- 添加canvas標簽，并加上紅色邊框以便于在頁面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//開始一個新的繪制路徑
ctx.beginPath();
//設置線條顏色為藍色
ctx.strokeStyle = "blue";
//設置路徑起點坐標
ctx.moveTo(20, 50);
//繪制直線線段到坐標點(60, 50)
ctx.lineTo(20, 100);
//繪制直線線段到坐標點(60, 90)
ctx.lineTo(70, 100);
//先關閉繪制路徑。注意，此時將會使用直線連接當前端點和起始端點。
ctx.closePath();
//最后，按照繪制路徑畫出直線
ctx.stroke();
}
</script>
</body>
</html>
對應的顯示效果如下：
繪制矩形
之所以將Canvas繪制矩形單獨提出來，是因為Canvas的畫筆工具——CanvasRenderingContext2D對象為繪制矩形提供了專用的方法。
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制矩形入門示例</title>
</head>
<body>
<!-- 添加canvas標簽，并加上紅色邊框以便于在頁面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//開始一個新的繪制路徑
ctx.beginPath();
//設置線條顏色為藍色
ctx.strokeStyle = "blue";
//以canvas中的坐標點(10,10)作為繪制起始點，繪制一個寬度為80px、高度為50px的矩形
ctx.rect(10, 10, 80, 50);
//按照指定的路徑繪制直線
ctx.stroke();
//關閉繪制路徑
ctx.closePath();
}
</script>
</body>
</html>
對應的矩形效果顯示如下：
“怎么用HTML5 Canvas繪制三角形和矩形等多邊形”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
