HTML5是一種最新的網頁開發語言，可以實現許多有趣的效果。今天，我們來學習一下如何使用HTML5制作循環的三角形。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循環制作三角形</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
//獲取Canvas元素
var canvas = document.getElementById("myCanvas");
//創建2D畫布
var ctx = canvas.getContext("2d");
//設置三角形的邊長和高度
var len = 30;
var height = Math.sqrt(3) / 2 * len;
//設置畫布大小
canvas.width = len * 20;
canvas.height = height * 10;
//繪制三角形的函數
function drawTriangle(x, y, len) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + len / 2, y + height);
ctx.lineTo(x - len / 2, y + height);
ctx.closePath();
ctx.stroke();
}
//循環繪制三角形
for (var i = 0; i <= 10; i++) {
for (var j = 0; j <= i; j++) {
drawTriangle(j * len + ((10 - i) / 2) * len, i * height, len);
}
}
</script>
</body>
</html>以上代碼使用了HTML5的<canvas>標簽來繪制三角形。通過設置canvas元素的大小和面積，我們可以更好地控制三角形的數量和大小。
在<script>標簽中，我們定義了畫布ctx和繪制三角形drawTriangle()的函數。在循環中，我們計算出每個三角形的位置，然后調用drawTriangle()函數進行繪制。
通過這個簡單的示例，我們可以了解到HTML5的一些基本操作，包括使用<canvas>標簽繪制圖形，以及使用JavaScript循環控制結構。
上一篇html5很火表白代碼
下一篇html5微信群代碼大全