Witam.
Wiele rożnych sposobów próbowałem aby narysować drugi obrazek bez nakładania petli z pierwszego jednak nic mi się nie udaje. Więc przychodzę spytaniem, co muszę zrobić aby ten drugi obrazek nie brał tej petli z pierwszego?
Proszę o pomoc, dziękuje pozdrawiam.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script type="text/javascript">
function draw(startX, startY, len, angle, branchWidth) {
var canvas = document.getElementById('canvas');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.save();
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI/180);
ctx.moveTo(0, 0);
ctx.lineTo(5, -len);
ctx.strokeStyle = "darkgreen";
ctx.fillStyle = "green";
ctx.lineWidth = branchWidth;
ctx.stroke();
if(len <8) {
ctx.restore();
return;
}
draw(0, -len, len*0.8, -8, branchWidth*0.8);
draw(0, -len, len*0.8, 8, branchWidth*0.8);
ctx.restore();
ctx.beginPath();
ctx.rotate(Math.PI / 30);
ctx.rect(30, 20, 250, 150);
ctx.fillStyle="gray";
ctx.fill();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.stroke();
}
}
</script>
</head>
<body onload="draw(350,0,120,180);">
<canvas id="canvas" width="2000" height="1170" ></canvas>
</body>
</html>