html画圣诞树—动态效果展示【炫酷合集

以下是一个简单的HTML和JavaScript代码示例，用于创建一个基本的动态圣诞树：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Christmas Tree</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  canvas {
    display: block;
  }
</style>
</head>
<body>
<canvas id="christmas-tree"></canvas>
 
<script>
// 定义树的属性
const tree = {
  size: 200,
  x: 300,
  y: 350,
  branches: 3,
  branchSize: 75,
  branchProb: 0.65,
  angle: 0,
  growSpeed: 10,
  maxBranches: 4,
  minSize: 10,
  color: '#336'
};
 
const canvas = document.getElementById('christmas-tree');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
 
function drawTree(x, y, size, branches, branchSize, branchProb, angle, color) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(0, -size);
  ctx.lineWidth = 10;
  ctx.strokeStyle = '#333';
  ctx.stroke();
  ctx.closePath();
 
  if (branches > 0) {
    for (let i = 0; i < branches; i++) {
      const p = branchProb * (0.7 + 0.6 * Math.random());
      const newSize = size * 0.7;
      const newBranches = Math.max(Math.ceil(branches * p), 1);
      const newBranchSize = branchSize * 0.7;
      const newAngle = angle + (Math.random() - 0.5) * 0.1;
      drawTree(0, -size, newSize, newBranches, newBranchSize, p, newAngle, color);
    }
  }
  ctx.restore();
}
 
function animate() {
  ctx.clearRect(0, 0, width, height);
  if (tree.branches < tree.maxBranches) {
    tree.branches++;
    tree.branchSize = tree.branchSize * 0.95;
    tree.size = tree.size * 0.97;
  }
  drawTree(tree.x, tree.y, tree.size, tree.branches, tree.branchSize, tree.branchProb, tree.angle, tree.color);
  window.requestAnimationFrame(animate);
}
 
animate();
</script>
</body>
</html>

这段代码使用了canvas元素来绘制一个简单的动态圣诞树。在浏览器中打开后，将会看到一个以雪花飘落效果增长的小树。你可以通过调整tree对象的属性来自定义树的外观和生长速度。

html画圣诞树—动态效果展示【炫酷合集

评论已关闭

推荐阅读