Статья по теме:
Демо JavaScript:
Ширина линии
Расстояние между линиями
Задача — написать программу, которая будет строить изображение Канторова множества.
Для построения изображения ввести в поля "Ширина линии","Расстояние между линиями" нужные значения и нажать на кнопку отправить.
<html> <head> <meta charset="utf-8"> </head> <body> <canvas id="fl" width="500" height="300"></canvas> <br /> <input type="number" id="len" min="1" max="50" value="10" step="1">Ширина линии<br /> <input type="number" id="ste" min="1" max="50" value="30" step="1">Расстояние между линиями<br /> <input type="button" onclick="draw()" value="Отправить"> <script type="text/javascript"> var canvas = document.getElementById('fl'); var ctx=canvas.getContext('2d'); function drawc(x,y,w,l,st)//рекурсивная функция отрисовки линий { if(w>=0.05)//рисуем, пока длина линии больше { ctx.beginPath(); ctx.fillRect(x,y,w,l);//рисуем линию на текущем уровне ctx.closePath(); y=y+st; drawc(x,y,w/3,l,st); //вызываем функцию для отрисовки drawc(x+w*2/3,y,w/3,l,st);//2-ух линий на следующем уровне } } drawc(10,10,490,10,30); function draw() { ctx.clearRect(0,0,500,500); var l=document.getElementById('len').value;//ширина линий var ste=document.getElementById('ste').value;//расстояние между верхними границами линий var st=Number(ste); drawc(10,10,490,l,st); } </script> </body> </html>
| Прикрепленный файл | Размер |
|---|---|
| gapon_fractal.zip | 816 байтов |