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

2

虽然Xotic750 的答案要好得多，因为没有经常发生数学重新计算，这里是 JavaScript-only 替代方案的 jsFiddle。这个版本提供的优势是在不支持 CSS3 动画的浏览器上向后兼容。

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

解释：

var counter = 0;
setInterval(function () {
    DrawSpiral(counter);
    counter += 0.075;
}, 10);
  • counter是一个变量，它将记录下一次重绘时螺旋线应位于的位置。
  • 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值更改为下一个“点”。
  • ... Math.sin(theta - mod)将newY值更改为下一个“点”。

请记住，根据浏览器、CPU、显卡等，此方法可能会慢一些。

于 2013-04-29T20:40:33.110 回答
1

好的，这是一种使用 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 上

于 2013-04-29T20:12:00.417 回答