Спираль на Javascript
Программно нарисуем на канве HTML "классическую" спираль, например, вот такую:
У этого кода всего две настройки, ниже он показан в виде файла .html (предполагается сохранение файла в Юникоде, точней, в UTF-8):
<!DOCTYPE HTML>
<html><body>
<div align="center">
<canvas id="spiralCanvas" width="140" height="140"></canvas>
</div>
<script type="text/javascript">
var c=document.getElementById("spiralCanvas");
var ctx=c.getContext("2d");
var width = c.width, height = c.height; //размеры канвы
var cx = Math.floor(width/2), cy = Math.floor(height/2); //центр канвы
ctx.moveTo (cx, cy);
var STEPS_PER_ROTATION = 360; //шагов на круг
var increment = 2*Math.PI/STEPS_PER_ROTATION;
var theta = increment;
var ROTATIONS = 10; //количество вращений
while (theta < ROTATIONS*2*Math.PI) {
var newX = cx + theta * Math.cos(theta);
var newY = cy - theta * Math.sin(theta);
ctx.lineTo (newX, newY);
theta += increment;
}
ctx.stroke();
</script>
<noscript>
<div align="center">Извините, для работы приложения нужен включённый Javascript</div>
</noscript>
</body></html>
Если нужна прямо-таки архимедова спираль, можно применить отдельную функцию с увеличенным количеством аргументов-настроек, вот файл .html в этом варианте построения спирали на канве:
<!DOCTYPE HTML>
<html><body>
<div align="center">
<canvas id="spiralCanvas" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
function archimedeanSpiral (ctx, cx, cy, stepCount, loopCount, innerDistance, loopSpacing, rotation) {
ctx.beginPath();
var stepSize = 2 * Math.PI / stepCount,
endAngle = 2 * Math.PI * loopCount,
finished = false;
for (var angle = 0; !finished; angle += stepSize) {
if (angle > endAngle) {
angle = endAngle; finished = true;
}
var scalar = innerDistance + loopSpacing * angle,
rotatedAngle = angle + rotation,
x = cx + scalar * Math.cos (rotatedAngle),
y = cy - scalar * Math.sin (rotatedAngle);
ctx.lineTo (x, y);
}
ctx.stroke();
}
var c=document.getElementById("spiralCanvas");
var ctx=c.getContext("2d");
var width = c.width, height = c.height; //размеры канвы
var cx = Math.floor(width/2), cy = Math.floor(height/2); //центр канвы
archimedeanSpiral (ctx, cx, cy,
360 /*шагов на круг*/,
5 /*кругов*/,
0 /*дополнительный отступ*/,
5 /*пикселов между витками*/,
0 /*угол поворота всей спирали*/);
</script>
</body></html>
22.09.2018, 18:25 [3232 просмотра]