製作旋轉螺旋

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

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

Answer 2

雖然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，顯卡等