Статья по теме:
Демо JavaScript:
<canvas height="600" width='600' id='cnvs'></canvas><br /> <p1> Введите количество разбиений [1; 6] </p1> <br /> <br /> <input type="number" id="iterationCnt" min="1" max="6" value="1" /> <br /> <br /> <input type="button" onclick="draw()" value="Старт"> </canvas> <script> var canvas = document.getElementById("cnvs"), ctx = canvas.getContext("2d"); 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 drawMCT(A, B, C, iter) // // нахождение центра масс треугольника, построение { if(iter == 0) return; // нахождения центра масс треугольника var v1 = { x: B.x - A.x, y: B.y - A.y }, v2 = { x: C.x - A.x, y: C.y - A.y }, D = { x: A.x + Math.floor((v1.x + v2.x) / 3), y: A.y + Math.floor((v1.y + v2.y) / 3) } // проводим линии к центру масс drawLine(A, D), drawLine(B, D), drawLine(C, D); // решаем для 3-х треугольников меньшего размера drawMCT(A, B, D, iter-1), drawMCT(B, C, D, iter-1), drawMCT(A, C, D, iter-1); } function drawTriangle(a, b, c) // построение главного треугольника { drawLine(a, b); drawLine(b, c); drawLine(c, a); } function draw() // главная функция { var imgData = ctx.createImageData(600, 600); ctx.beginPath(); ctx.putImageData(imgData, 0, 0); var a = new Point(100, 300); // вершины главного треугольника var b = new Point(250, 100); var c = new Point(400, 300); var iter = document.getElementById("iterationCnt").value; // количество разбиений drawTriangle(a, b, c); // строим главный треугольник drawMCT(a, b, c, Math.min(6, iter)); // решение ctx.closePath(); } </script>