製作旋轉螺旋

我發現了一個繪製螺旋的代碼，我需要旋轉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

製作旋轉螺旋

回答

相關問題