我想用JS制作一个非常简单的分形树(用于学习目的)。我一直在使用以下代码,这是我从维基百科的一篇文章中得到的。这很好,只是我希望线宽随着每次迭代而递减。正如你所看到的,我尝试了context.lineWidth=context.lineWidth-1,但这不起作用。有人知道如何做到这一点吗?
var elem = document.getElementById('canvas');
var context = elem.getContext('2d');
context.fillStyle = '#000';
context.lineWidth = 20;
var deg_to_rad = Math.PI / 180.0;
var depth = 9;
function drawLine(x1, y1, x2, y2){
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = context.lineWidth - 1;
}
function drawTree(x1, y1, angle, depth){
if (depth != 0){
var x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 10.0);
var y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 10.0);
drawLine(x1, y1, x2, y2);
drawTree(x2, y2, angle - 20, depth - 1);
drawTree(x2, y2, angle + 20, depth - 1);
}
}
context.beginPath();
drawTree(300, 500, -90, depth);
context.closePath();
context.stroke();
如果有一种分阶段完成的方法,这样当我点击一个按钮时,它就会添加一个新的分支,那也太好了。不管怎样,我们将非常感谢你的建议。
我创建并调整了一把小提琴,它可以随心所欲。
小提琴
总而言之:每次设置新线宽时,都需要笔划。所以代码看起来是这样的:
function drawLine(x1, y1, x2, y2, lw){
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = lw;
context.closePath();
context.stroke();
}
function drawTree(x1, y1, angle, depth, lw){
if (depth != 0){
var x2 = x1 + (Math.cos(angle * deg_to_rad) * depth * 10.0);
var y2 = y1 + (Math.sin(angle * deg_to_rad) * depth * 10.0);
drawLine(x1, y1, x2, y2, lw);
drawTree(x2, y2, angle - 20, depth - 1, lw - 1);
drawTree(x2, y2, angle + 20, depth - 1, lw - 1);
}
}
drawTree(300, 500, -90, depth, depth);