БлогNot. Спираль на Javascript

Спираль на 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 [3113 просмотров]


теги: javascript графика

показать комментарии (1)