Простое фрактальное дерево JS/html5 с уменьшающейся шириной линии

Question

Я хотел бы сделать очень простое фрактальное дерево (для учебных целей) с помощью 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(); 

Было бы замечательно, если бы был способ сделать это в несколько этапов, так что, когда я нажимаю на кнопку, он добавляет новую ветку. Во всяком случае, ваш совет будет очень признателен.

Answer 1

Я создал и исправил скрипку, которая как-то делает то, что вы хотите.

fiddle

Всего: Вам нужно гладить каждый раз, когда новая ширина линии устанавливается. Таким образом, код выглядит так:

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);