1

らせんを描くコードを見つけたので、それを 360 度回転させる必要があります (催眠効果のようなもの)。アニメ化してみたのですが、うまく実装する方法がわかりません。もう時間がありません。そのコードができるだけ単純であれば、それは素晴らしいことです。

スパイラルコードは次のとおりです。

<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    var centerX = 150;
    var centerY = 150;
    cxt.moveTo(centerX, centerY);

    var STEPS_PER_ROTATION = 60;
    var increment = 2*Math.PI/STEPS_PER_ROTATION;       
    var theta = increment;

    while( theta < 40*Math.PI) {
      var newX = centerX + theta * Math.cos(theta); 
      var newY = centerY + theta * Math.sin(theta); 
      cxt.lineTo(newX, newY);
      theta = theta + increment;
    }
    cxt.stroke();
</script>
4

2 に答える 2