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（桌面，移动和迷你）上。 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值更改为下一个“ 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

上

制作旋转螺旋

2 个答案: