Question

您好我有以下代码在画布上生成螺旋，我想要的是螺旋在绘制时动画，此时使用下面的代码，当页面加载时螺旋完全绘制。我想看到正在绘制螺旋。我想使用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/

Answer 1

要使用window.requestAnimationFrame(yourFunction);动画，这会将您的功能调用到屏幕，并与浏览器同步，以提供最佳的动画效果。它还会以毫秒为单位传递它调用当前时间的函数。

我刚刚添加了update功能，可以清除屏幕。然后用一个小mod调用你的螺旋来根据时间动画它。然后更新功能请求一个新帧并退出。

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

我假设您希望动画在给定的时间跨度（例如4秒）内绘制螺旋。我将您的绘图代码放在update（）函数中。我用update（）函数调用了requestAnimationFrame函数。第一次调用update（）函数时，我会记录动画的开始时间。然后，我通过从开始时间减去当前timeStamp然后除以所需的总时间（例如4秒= 4000ms）来计算绘制进度（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>

如何动画绘制螺旋

2 个答案: