htm5 用canvas递归画树

最新推荐文章于 2023-08-28 09:22:47 发布

ly_lv_hx

最新推荐文章于 2023-08-28 09:22:47 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.youkuaiyun.com/ly_lv_hx/article/details/8612725

版权

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看了一篇用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 = branchWidth; // 路径的宽度
ctx.lineTo(endX, endY);  // 路径的终点


if(depth<=2){ // 叶子节点，为绿色系
ctx.strokeStyle = 'rgb(0,' + (((rand()*64 + 128) >>0)) + ',0)';
} else {
ctx.strokeStyle = 'rgb(' + (((rand()*64 + 64) >> 0)) + ',50, 25)'; // 树干节点，为棕色系
}  // 路径填充的颜色

ctx.stroke(); // 封闭路径
newDepth = depth - 1;
if(newDepth <=0){
return; // 如果绘制到叶子节点后就结束递归
}
// 重新计算路径的长度、角度、宽度。其中长度为之前长度的0.7~1倍，角度为之前的长度的正负45度之内，宽度为之前长度的0.7倍
subBranches = (maxBranch - 1)*rand() + 1;
branchWidth *= 0.7;
for(var i=0; i< subBranches; i++){
newLength = length*0.7 + 0.3*length*rand();
newAngle = angle + rand()*maxAngle - maxAngle*0.5;
drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);
}
}

drawTree(ctx, 320, 470, 60, -Math.PI/2, 12, 12);

小结：canvas绘制路径的步骤。

ctx.beginPath(); 清除之前的路径，开始绘制路径

ctx.moveTo(x, y ); 显式声明路径的起点

ctx.lineCap="round, butt, squre"; 定义路径的样式

ctx.lineWidth=""; 定义路径宽度

ctx.lineTo(x, y); // 定义路径的终点

ctx.strokeStyle(); // 定义路径的填充样式

ctx.stroke();//绘制路径