javascript - 制作旋转螺旋

Question

我找到了一个绘制螺旋的代码，我需要让它旋转 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>

Answer 1

同时 Xotic750's answer好多了，因为没有不断发生的数学重新计算，here's the jsFiddle of a JavaScript-only alternative .此版本提供的优势是在没有 CSS3 animation support 的浏览器上向后兼容。 .

CSS3 动画支持最近才出现在 Firefox、Safari、Internet Explorer 和 Opera(桌面、移动和 Mini)中。 Chrome(桌面版和移动版)和黑莓浏览器是仅有的在很早的阶段就支持动画的浏览器。

---

解释:

var counter = 0;
setInterval(function () {
    DrawSpiral(counter);
    counter += 0.075;
}, 10);

• counter 是一个变量，它将保持 count 螺旋在下一次重绘时应该位于的位置。
• DrawSpir​​al 是执行实际工作的函数。

有两个因素可以帮助改变旋转速度； counter (+= 0.075) 和 setInterval 延迟 (50) 的变化。

这两个因素应该是成反比的。换句话说，增加 setInterval 延迟应该与减少计数器变化齐头并进。

---

与原来相比的变化:

cxt.save();
cxt.clearRect(0, 0, c.width, c.height);

cxt.beginPath();

• 将您的螺旋绘图代码封装到 DrawSpir​​al(...) 函数中。
• cxt.save() 存储当前的转换。
• cxt.clearRect(...) 清除 Canvas (以免在之前的绘图之上绘制)。
• cxt.beginPath() 开始一个新的行路径(本质上是切断上一个路径)。

下一组更改:

var newX = centerX + theta * Math.cos(theta - mod);
var newY = centerY + theta * Math.sin(theta - mod);

• ... Math.cos(theta - mod) 将 newX 值更改为下一个“spot”。
• ... Math.sin(theta - mod) 将 newY 值更改为下一个“spot”。

---

请记住，此方法可能会稍微慢一些，具体取决于浏览器、CPU、显卡等。