HTML5中，有許多新的標簽可供使用，其中包括canvas和pre等標簽。這些標簽使得我們可以用簡單的代碼實現一些特殊的功能，比如模擬植物的生長過程。
以下是一個簡單的HTML5植物生長代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>植物生長代碼</title>
<style>
canvas {
border: 1px solid #000;
background-color: #fff;
margin: 20px;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var iterations = 1000;
var length = 70;
var angle = Math.PI / 4;
var thickness = 5;
var growth = 0.75;
var color = '#00ff00';
var branchColor = '#996600';
drawTree(canvas.width / 2, canvas.height, length, -Math.PI / 2, thickness, color, branchColor);
function drawTree(x, y, len, angle, thickness, color, branchColor) {
ctx.beginPath();
ctx.save();
ctx.strokeStyle = color;
ctx.fillStyle = branchColor;
ctx.translate(x, y);
ctx.moveTo(0, 0);
ctx.rotate(angle);
ctx.lineTo(0, -len);
ctx.lineWidth = thickness;
ctx.stroke();
if (iterations >0) {
iterations--;
//draw left branch
drawTree(0, -len, len * growth, -angle * growth, thickness * growth, color, branchColor);
//draw right branch
drawTree(0, -len, len * growth, angle * growth, thickness * growth, color, branchColor);
iterations++;
}
ctx.restore();
}
</script>
</body>
</html>這個代碼模擬了一顆樹的生長過程。它使用了canvas標簽來創建一個畫布，pre標簽來展示代碼。在JavaScript中，我們定義了一些變量，如iterations（迭代次數）、length（樹枝長度）、angle（旋轉角度）、thickness（樹干粗細）、growth（生長速度）和color（顏色），并通過調用drawTree函數來繪制樹的生長過程。在這個函數中，我們使用了ctx.beginPath()、ctx.save()、ctx.restore()、ctx.moveTo()、ctx.rotate()和ctx.lineTo()等方法來繪制樹的不同部分。
通過運行這段代碼，我們可以看到一顆逐漸生長的樹，這是因為我們使用了遞歸的方式來繪制樹的不同部分。這個例子展示了HTML5中一些新的特性以及如何使用它們來實現一些有趣的功能。
上一篇require管理css
下一篇html5樣式加粗代碼