如何動畫螺旋的繪製

嗨，我有下面的代碼，在畫布上生成螺旋，我想要的是螺旋被動畫，因爲它是繪製，在這一刻下面的代碼，螺旋是當頁面加載時完全繪製。我想看到正在繪製的螺旋。我想使用requestAnimationFrame來完成這項工作。如何動畫螺旋的繪製

我的HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="styles.css"> 
<meta charset="utf-8"> 
    <title>Spiral</title> 
</head> 
<body> 
    <canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas> 
<script src="scripts.js"></script> 
</body> 
</html>

和我的javascript

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var centerX = canvas.width/2; 
var centerY = canvas.height/2; 
ctx.moveTo(centerX,centerY); 


    var gap =2; 
    var steps = 60; 

    var increment = 2*Math.PI/steps; 
    var theta = increment; 

while(theta < 20*Math.PI) { 
    var newX = centerX + theta * Math.cos(theta) * gap; 
    var newY = centerY + theta * Math.sin(theta) * gap; 
    ctx.lineTo(newX,newY); 
    theta = theta + increment; 
} 
ctx.stroke();

請參閱的jsfiddle https://jsfiddle.net/gustav1105/hx8tm43k/

來源

2016-01-13 Gustav Coetzee

看一看這個線程：http://stackoverflow.com/questions/31096766/creating-the-butterfly-curve-with-arrays特別是要注意'tavnab's'答案，它提供了靜態和動畫版本。（完全不同的曲線） – enhzflep

我假設你想要的動畫繪製在給定的時間跨度（例如4秒）的螺旋。我將你的繪圖代碼放入update（）函數中。我使用update（）函數調用了requestAnimationFrame函數。第一次調用update（）函數時，我記錄了動畫的開始時間。然後，我通過從開始時間減去當前時間戳然後除以所需的總時間（例如4秒= 4000毫秒）來計算繪圖進度（0 =開始，1 =結束）。然後我繪製螺旋到當前的進展。如果螺旋不完整（即進度< 1），則再次調用requestAnimationFrame（）函數。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
var gap = 2; 
 
var steps = 60; 
 
var increment = 2 * Math.PI/steps; 
 
var start = null; 
 
function update(timeStamp) { 
 
    if (!start) { 
 
     start = timeStamp; 
 
    } 
 
    var progress = Math.min((timeStamp - start)/4000, 1); 
 
    var theta = increment; 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.moveTo(centerX,centerY); 
 
    while (theta < progress * 20 * Math.PI) { 
 
     var newX = centerX + theta * Math.cos(theta) * gap; 
 
     var newY = centerY + theta * Math.sin(theta) * gap; 
 
     ctx.lineTo(newX,newY); 
 
     theta = theta + increment; 
 
    } 
 
    ctx.stroke(); 
 
    if (progress < 1) { 
 
     requestAnimationFrame(update); 
 
    } 
 
} 
 
requestAnimationFrame(update);

<canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas>

來源

2016-01-13 21:43:46

謝謝你的魅力 –

爲了動畫使用window.requestAnimationFrame(yourFunction);這將調用你的函數同步到屏幕上，並與該瀏覽器來提供最佳的動畫表現。它也將傳遞它以毫秒爲單位的當前時間的函數。

我剛剛添加了一個清除屏幕的update函數。然後用一個小模塊調用你的螺旋來根據時間對它進行動畫處理。然後更新函數請求一個新的幀並退出。

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var centerX = canvas.width/2; 
 
var centerY = canvas.height/2; 
 
ctx.lineWidth = 3; 
 
function drawSpiral(time) { 
 
    var angOff, gap, steps, increment, theta, newX, newY; 
 
    // use time to get an angle offset 
 
    angOff = time/-60; 
 
    ctx.beginPath(); 
 
    ctx.moveTo(centerX, centerY); 
 
    gap = 2; 
 
    steps = 60; 
 
    increment = 2 * Math.PI/steps; 
 
    theta = increment; 
 
    while (theta < 20 * Math.PI) { 
 
     newX = centerX + theta * Math.cos(theta + angOff) * gap; 
 
     newY = centerY + theta * Math.sin(theta + angOff) * gap; 
 
     ctx.lineTo(newX, newY); 
 
     theta = theta + increment; 
 
    } 
 
    ctx.stroke(); 
 
} 
 
function update(time) { // called by browser through requestAnimationFrame 
 
    // time is the current time in milliseconds 
 

 
    // clear the canvas 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    // draw the spiral animating via the time 
 
    drawSpiral(time); 
 

 
    // this gets the next animation frame 
 
    // that is in sync with the browsers rendering and 
 
    // will keep in sync with the screen refresh so you dont 
 
    // get any shearing 
 
    requestAnimationFrame(update); //' request next animation frame 
 
} 
 
// start the animation 
 
requestAnimationFrame(update);

\t <canvas id="canvas" style="border: 1px solid black" width="300" height="300"></canvas>

來源

2016-01-13 19:59:39 Blindman67

如何動畫螺旋的繪製

回答

相關問題