Статья по теме:
Демо JavaScript:
<canvas height="600" width='600' id='cnvs'></canvas><br /> <script> var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d"); var ang90 = Math.PI / 2; // Угол поворота на 90 градусов var ang45 = Math.PI / 4; // Угол поворота на 45 градусов var ang30 = Math.PI / 6; // Угол поворота на 30 градусов var animAngle = ang90; var dDeg = 0.002; function play() { draw(); update(); requestAnimationFrame(play); } function update() { animAngle -= dDeg; if(animAngle < -ang90)dDeg *= -1; if(animAngle > ang90)dDeg *= -1; } var Point = function(x, y) // Конструктор для точки { this.x = x; this.y= y; } function drawLine(a, b) // Рисование линии { ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); // ctx.stroke(); } function drawTree(x, y, a, angle) // построение дерева Пифагора { if (a > 2) { a *= 0.7; var nx = x + a * Math.cos(angle), // вычисление новых координат ny = y - a * Math.sin(angle); drawLine(new Point(3*x, 3*y), new Point(3*nx, 3*ny)); drawTree(nx, ny, a, angle + animAngle); // рекурсивный вызов для новых точек drawTree(nx, ny, a, angle - animAngle); // под другими углами } } function draw() // главная функция { var imgData = ctx.createImageData(600, 600); ctx.beginPath(); ctx.putImageData(imgData, 0, 0); ctx.strokeStyle = 'green'; drawTree(100, 160, 60, ang90); ctx.stroke(); ctx.closePath(); } play(); </script>