做一个旋转的螺旋

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 螺旋在下一次重绘时应位于的位置。
• DrawSpiral 是执行实际工作的函数。

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

这两个因素应该成反比。换句话说，增加 setInterval 延迟应该与减少 计数器变化同时进行。

---

与原来的变化：

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

cxt.beginPath();

• 将您的螺旋绘图代码封装到DrawSpiral(...) 函数中。
• cxt.save() 存储当前的转换。
• cxt.clearRect(...) 清除画布（以免在之前的绘图之上绘制）。
• 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、显卡等。

Answer 2

好的，这是一种使用 CSS 动画而不是数学计算的解决方案。

CSS

@-webkit-keyframes myCanvas {
    0% { -webkit-transform: rotateZ(360deg); }
    100% { -webkit-transform: rotateZ(0deg); }
}
@-moz-keyframes myCanvas {
    0% { -moz-transform: rotateZ(360deg); }
    100% { moz-transform: rotateZ(0deg); }
}
@keyframes myCanvas {
    0% { transform: rotateZ(360deg); }
    100% { transform: rotateZ(0deg); }
}

#myCanvas {
    -webkit-animation: myCanvas 2s infinite linear;
    -moz-animation: myCanvas 2s infinite linear;
    animation: myCanvas 2s infinite linear;
}

HTML

<canvas id="myCanvas" width="300" height="300"></canvas>

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();

开启jsfiddle