制作旋转螺旋

我发现了一个绘制螺旋的代码，我需要旋转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>

来源

2013-04-29 himcgyver

上也许这页将帮助您https：//开头开发商.mozilla.org/zh-CN/docs/HTML/Canvas/Tutorial/Transformations – Xotic750 2013-04-29 19:52:35

OK，这里是一个解决方案使用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-29 20:12:00 Xotic750

感谢您的回应！我试图放入Dreamweaver中，但它不起作用。任何建议，我可能是错的？ – himcgyver 2013-05-01 10:37:16

不是最模糊的，我不使用Dreamweaver-不能说编辑器的行为就像浏览器。 – Xotic750 2013-05-01 10:41:58

所以，你可以请看看这个，并给任何提示？ http://imageshack.us/photo/my-images/29/codeqf.jpg/ – himcgyver 2013-05-01 10:50:24

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

CSS3动画支持最近才发布到Firefox，Safari，Internet Explorer和Opera（桌面，移动和迷你）。 Chrome（桌面和移动）和BlackBerry浏览器是唯一被证明在很早的阶段就支持动画的人。

说明：

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-29 20:40:33 Jesse

+1干得好！有没有支持HTML5画布但不支持CSS3的浏览器？只是想知道... – Xotic750 2013-04-29 21:55:14

@ Xotic750我发现的差异是旧版本的Firefox，Safari，IE和Opera（桌面，迷你，手机）。他们都支持[支持画布]（http://caniuse.com/canvas），但是，CSS3的[动画]（http://caniuse.com/#feat=css-animation）仅适用于最近到了一些。 Chrome（桌面和移动）和BlackBerry浏览器是唯一从早期阶段就支持这两种技术的产品。 – Jesse 2013-04-29 22:50:11

制作旋转螺旋

回答

相关问题