<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas 大树枝干和绿叶生长动画</title>
<style>
body {
padding: 0;
margin: 0;
text-align: center;
background-color: black;
}
h1 {
color: white;
font-family: sans-serif;
}
canvas {
position: relative;
top: 50vh;
margin-top: -150px;
background-color: #000;
transition: all 15s;
-webkit-transition: all 15s;
}
</style>
</head>
<body>
<canvas id='canvas' width='800' height='300'></canvas>
<script>
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
drawBranches(context, canvas.width / 2, canvas.height, 10, 0);
backColor();
};
function drawBranches(ctx, startX, startY, trunkWidth, level) {
if (level < 12) {
var changeX = 100 / (level + 1);
var changeY = 100 / (level + 1);
var topRightX = startX + Math.random() * changeX;
var topRightY = startY - Math.random() * changeY;
var topLeftX = startX - Math.random() * changeX;
var topLeftY = startY - Math.random() * changeY;
/* right branch */
ctx.beginPath();
ctx.moveTo(startX + trunkWidth / 4, startY)
ctx.quadraticCurveTo(startX + trunkWidth / 4, startY - trunkWidth, topRightX, topRightY);
ctx.lineWidth = trunkWidth;
if (level > 10) {
ctx.strokeStyle = "rgb(9, 106, 9)";
} else if (level > 6) {
ctx.strokeStyle = "rgb(24, 57, 30)"
} else {
ctx.strokeStyle = "rgb(132, 46, 27)";
}
ctx.lineCap = "round";
ctx.stroke();
/* right branch */
ctx.beginPath();
ctx.moveTo(startX - trunkWidth / 4, startY)
ctx.quadraticCurveTo(startX - trunkWidth / 4, startY - trunkWidth, topLeftX, topLeftY);
ctx.lineWidth = trunkWidth;
ctx.lineCap = "round";
ctx.stroke();
setTimeout(function() {
drawBranches(ctx, topRightX, topRightY, trunkWidth * 0.7, level + 1)
}, 100);
setTimeout(function() {
drawBranches(ctx, topLeftX, topLeftY, trunkWidth * 0.7, level + 1);
}, 100);
}
}
var interval = setInterval(drawAgain, 1000);
var i = 0;
function drawAgain() {
drawBranches(context, Math.random() * canvas.width, canvas.height, 10, 0);
if (i > 6) {
clearInterval(interval);
}
i++
}
function backColor() {
canvas.style.backgroundColor = "rgb(128, 208, 208)";
}
</script>
</body>
</html>
