使用Canvas绘制一颗树

在前端开发中，使用HTML5的Canvas API可以绘制出很多有趣的图形，包括树。下面是一个简单的示例，展示了如何使用Canvas绘制一颗基本的树：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Tree</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
  function drawTree(startX, startY, len, angle, branchWidth, color) {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    ctx.save();
    
    // 设置线条颜色和宽度
    ctx.strokeStyle = color;
    ctx.lineWidth = branchWidth;
    
    // 移动到起始点
    ctx.translate(startX, startY);
    
    // 旋转一定角度
    ctx.rotate(angle * Math.PI / 180);
    
    // 绘制树枝
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -len);
    ctx.stroke();
    
    // 递归绘制分支
    if(len < 10) {
      ctx.restore();
      return;
    }
    
    drawTree(0, -len, len * 0.8, angle - 10, branchWidth * 0.8, color); // 左分支
    drawTree(0, -len, len * 0.8, angle + 10, branchWidth * 0.8, color); // 右分支
    
    ctx.restore();
  }
  
  // 绘制树的初始调用
  drawTree(400, 600, 150, 0, 20, 'brown');
</script>
</body>
</html>

这个示例中，drawTree函数是一个递归函数，用于绘制树和它的分支。你可以通过调整函数的参数来改变树的外观，比如起始位置、长度、角度、分支宽度和颜色等。这个示例中的树是比较简单的，你可以根据需要进一步扩展和优化。

posted @ 2024-12-29 06:21  王铁柱6  阅读(64)  评论(0)    收藏  举报