溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細(xì)介紹“怎么用HTML5 Canvas來(lái)繪制三角形和矩形等多邊形”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“怎么用HTML5 Canvas來(lái)繪制三角形和矩形等多邊形”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。
html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。
使用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)前的繪制路徑是打開的，則閉合該繪制路徑。 |
繪制三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制三角形入門示例</title>
</head>
<body>
<!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標(biāo)簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對(duì)象(畫布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)
var ctx = canvas.getContext("2d");
//開始一個(gè)新的繪制路徑
ctx.beginPath();
//設(shè)置線條顏色為藍(lán)色
ctx.strokeStyle = "blue";
//設(shè)置路徑起點(diǎn)坐標(biāo)
ctx.moveTo(20, 50);
//繪制直線線段到坐標(biāo)點(diǎn)(60, 50)
ctx.lineTo(20, 100);
//繪制直線線段到坐標(biāo)點(diǎn)(60, 90)
ctx.lineTo(70, 100);
//先關(guān)閉繪制路徑。注意，此時(shí)將會(huì)使用直線連接當(dāng)前端點(diǎn)和起始端點(diǎn)。
ctx.closePath();
//最后，按照繪制路徑畫出直線
ctx.stroke();
}
</script>
</body>
</html>對(duì)應(yīng)的顯示效果如下：
繪制矩形
之所以將Canvas繪制矩形單獨(dú)提出來(lái)，是因?yàn)镃anvas的畫筆工具——CanvasRenderingContext2D對(duì)象為繪制矩形提供了專用的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas繪制矩形入門示例</title>
</head>
<body>
<!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標(biāo)簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對(duì)象(畫布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)
var ctx = canvas.getContext("2d");
//開始一個(gè)新的繪制路徑
ctx.beginPath();
//設(shè)置線條顏色為藍(lán)色
ctx.strokeStyle = "blue";
//以canvas中的坐標(biāo)點(diǎn)(10,10)作為繪制起始點(diǎn)，繪制一個(gè)寬度為80px、高度為50px的矩形
ctx.rect(10, 10, 80, 50);
//按照指定的路徑繪制直線
ctx.stroke();
//關(guān)閉繪制路徑
ctx.closePath();
}
</script>
</body>
</html>對(duì)應(yīng)的矩形效果顯示如下：
如果你能讀到這里，小編希望你對(duì)“怎么用HTML5 Canvas來(lái)繪制三角形和矩形等多邊形”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(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)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼