如何使用画布对曲线的绘制进行动画处理

How to animate the drawing of a Curve with Canvas?

本文关键字：绘制 动画 处理 曲线 何使用      更新时间：2023-09-26

我有一堆点想慢慢画出来。我尝试设置超时和本教程的效果。但没有那么多成功。

函数如下所示

功能： 

var myFunction = function(ctx, grid, points) {
                ctx.beginPath();
                ctx.moveTo(points[0].x, points[0].y);
                ctx.lineWidth = 2;
                ctx.strokeStyle = '#2068A8';
                ctx.fillStyle = '#2068A8';
                var count = 1;
                for (count = 1; count < points.length; count++) {
                    ctx.lineTo(points[count].x , points[count].y);
                }
                ctx.stroke();
            }

围绕这个函数还有许多其他绘图函数，但我只想制作一个动画。

如何用画布慢慢绘制函数？

有两种方法可以做到这一点，我可以想到。一个基本上是画一个点，在画另一个点之前暂停一段时间。这是我提供的第一个示例。第二种方法涉及在当前目标上绘制部分线条，从而提供更平滑的绘制外观。作为旁注，我在两个示例中都使用了requestAnimationFrame，这是执行任何类型的画布动画的推荐方法。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 200;
var points = [],
    currentPoint = 1,
    nextTime = new Date().getTime()+500,
    pace = 200;
// make some points
for (var i = 0; i < 50; i++) {
    points.push({
        x: i * (canvas.width/50),
        y: 100+Math.sin(i) * 10
    });
}
function draw() {
    if(new Date().getTime() > nextTime){
        nextTime = new Date().getTime() + pace;
        currentPoint++;
        if(currentPoint > points.length){
            currentPoint = 0;
        }
    }
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#2068A8';
    ctx.fillStyle = '#2068A8';
    for (var p = 1, plen = currentPoint; p < plen; p++) {
        ctx.lineTo(points[p].x, points[p].y);
    }
    ctx.stroke();
    requestAnimFrame(draw);
}
draw();

现场演示

如果您发现这有点断断续续，您可以执行以下操作来绘制更平滑的线条

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");
canvas.width = 400;
canvas.height = 200;
var points = [],
    currentPoint = 1,
    speed = 2,
    targetX = 0,
    targetY = 0,
    x = 0,
    y = 0;
// make some points
for (var i = 0; i < 50; i++) {
    points.push({
        x: i * (canvas.width/50),
        y: 100+Math.sin(i) * 10
    });
}
// set the initial target and starting point
targetX = points[1].x;
targetY = points[1].y;
x = points[0].x;
y = points[0].y;
function draw() {
    var tx = targetX - x,
        ty = targetY - y,
        dist = Math.sqrt(tx*tx+ty*ty),
        velX = (tx/dist)*speed,
        velY = (ty/dist)*speed;
        x += velX
        y += velY;
    if(dist < 1){
        currentPoint++;
        if(currentPoint >= points.length){
            currentPoint = 1;
            x = points[0].x;
            y = points[0].y;
        }
        targetX = points[currentPoint].x;
        targetY = points[currentPoint].y;
    }
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#2068A8';
    ctx.fillStyle = '#2068A8';
    for (var p = 0, plen = currentPoint-1; p < plen; p++) {
        ctx.lineTo(points[p].x, points[p].y);
    }
    ctx.lineTo(x, y);    
    ctx.stroke();
    requestAnimFrame(draw);
}
draw();

现场演示

感谢这些例子，洛克塔！ 这应该是对Loktar发布的答案中上面第二个示例的评论，但我无法发表评论，因为我刚刚注册并且没有足够的"声誉"。

我尝试了上面的第二个演示，如果你放慢速度，你会注意到新的线段从它应该开始的点之前的点开始增长。这就是我调整它以使其工作的方式：

我更改了以下行：

ctx.lineTo(points[p].x, points[p].y); 
// => 
ctx.lineTo(points[p+1].x, points[p+1].y);

现在结果看起来非常顺利。我发表评论是因为Loktar的帖子几乎是完美的，我希望人们不要因为一个需要调整的小细节而错过他的帖子。再次感谢，洛克塔尔！

相关文章：