Статья по теме:
Демо JavaScript:
var canvas, ctx, h, w, n, x0, y0, it, len, s, s1, s2, arr = []; window.onload = function(){ // начальная функция canvas = document.getElementById("paint"); ctx = canvas.getContext("2d"); h = canvas.height; w = canvas.width; alert("Введите кол-во итераций в пределах от 10 до 23.") len = 1; x0 = 0; y0 = h; } function Click(){ var str = document.getElementById("txt").value; // считываем кол-во итераций с текстового поля it = Number(str); s; s1 = "1"; s2 = "0"; ctx.clearRect(0, 0, w, h); // Получаем строку Фибоначчи на it итерации for (i = 0; i < it - 2; i++){ s = s2 + s1; s1 = s2; s2 = s; } //Если была одна итерация, тогда наша строка = "1", иначе мы получаем нужную строку s из s2 if (it == 1) s = "1"; else s = s2; var vx = 0, vy = -1;// Начальный вектор (0,-1) то есть вверх var x1 = x0; var y1 = y0; arr = s.split(''); //Проводим сегмент длины len в направлении вектора (vx,vy) for (i = 0; i < arr.length; i++){ var x2 = x1 + len * vx; var y2 = y1 + len * vy; //Нарисовали линию ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.stroke(); x1 = x2; y1 = y2; if (arr[i] == '0'){ if (i % 2 == 0){ var temp = vx; vx = -1 * vy; vy = temp; } else{ var temp = vx; vx = vy; vy = -1 * temp; } } } }