Статья по теме:
Демо JavaScript:
<canvas height="600" width='600' id='cnvs'></canvas><br /> <input type="button" onclick="draw()" value="Start"> </canvas> <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 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 = Math.round(x + a * Math.cos(angle)), // вычисление новых координат ny = Math.round(y - a * Math.sin(angle)); drawLine(new Point(3*x, 3*y), new Point(3*nx, 3*ny)); drawTree(nx, ny, a, angle + ang45); // рекурсивный вызов для новых точек drawTree(nx, ny, a, angle - ang30); // под другими углами } } function draw() // главная функция { var imgData = ctx.createImageData(600, 600); ctx.beginPath(); ctx.putImageData(imgData, 0, 0); ctx.strokeStyle = 'green'; drawTree(100, 160, 60, ang90); ctx.closePath(); } </script>