htm5 用canvas递归画树

最新推荐文章于 2023-07-12 16:54:43 发布

ly_lv_hx

最新推荐文章于 2023-07-12 16:54:43 发布

阅读量1k

点赞数

分类专栏： HTML5 前端文章标签： html5 canvas 例子画树

本文链接：https://blog.csdn.net/ly_lv_hx/article/details/8612725

版权

本文介绍了如何使用HTML5的Canvas API进行递归绘制树木。通过简单的代码示例，展示了如何设置路径起点、终点，定义线条样式和宽度，以及填充样式，最终实现画树的效果。

摘要由CSDN通过智能技术生成

今天看了一篇用canvas画树的文章，代码简单，于是便按照作者的讲述去实现了这个例子，演示网址如下点击打开链接。

代码如下：

// 在文档中创建canvas对象
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height =480;
document.body.appendChild(canvas);

// 定义画树的递归方法
var drawTree = function(ctx, startX, startY, length, angle, depth, branchWidth){
//定义全局变量
var rand = Math.random;
var newLength, newAngle, newDepth,endX, endY, maxBranch=3, maxAngle = 2*Math.PI/4, subBranches;
//开始绘制路径
ctx.beginPath();
ctx.moveTo(startX, startY);  //路径的起点
endX = startX + Math.cos(angle)*length;
endY = startY + Math.sin(angle)*length; // 计算路径的终点


ctx.lineCap = "round"; // 路径的样式
ctx.lineWidth = branchWid