c# - .clearRect(x,y,w,h) Canvas 动画

Question

我是使用 javascript 和 canvas 的相对初学者。我会尝试解释我到目前为止所做的事情。我有一个外部样式表，我已经设置了 Canvas 元素的背景(它是一条延伸到地平线的道路的背景图像)。然后，我创建了第一个函数 (drawRoad())，在道路中央绘制一条白色细带，并让它随着道路拖入地平线。然后我创建了另一个函数 (roadLines())，它在这个白色 strip 中插入空格。到目前为止，我对它的外观感到满意。

我现在要做的是通过一个循环... drawRoad()，然后是 roadLines()，然后清除 Canvas ，然后再次 drawRoad()，然后改变 roadLines() 的位置并调用又是这个功能。我想将 roadLines() 的位置垂直向下移动，从而产生沿着道路行驶的效果。 (我希望这是有道理的？)我这样做是正确的吗？还是有一种我完全忽略的更简单的方法？

如有任何建议，我们将不胜感激。以下是我到目前为止所做的。此外，函数 animate() 位于底部，但它所做的只是调用 drawRoad()，然后调用 roadLines()。

window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
    window.setTimeout(callback, 1);
};})();

// set function that draws in the canvas
function drawRoad() {
    var myCanvas = document.getElementById("myCanvas");
    var ctx = myCanvas.getContext("2d");
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.beginPath();
    ctx.moveTo(471, 199);
    ctx.lineTo(467, 600);
    ctx.lineTo(475, 600);
    ctx.closePath();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "rgb(255, 255, 255)";
}

//set variables and function/for loop that creates the spacing/intervals for road markings and movement
function roadLines() {
var interval = 1;
var space = 1;
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
for (var roadLine = 199; roadLine < 600; roadLine = roadLine + interval) {
    interval = (interval * 1.1);
    space = (space * 1.05);
    ctx.clearRect(450, roadLine, 40, space);
    }
}

function animate() {
    drawRoad();
    roadLines();
}

Answer 1

您需要做的第一件事就是让动画循环实际执行一个循环。现在它只是调用你的两个函数一次然后退出，所以首先调整可以是:

function animate() {
    drawRoad();
    roadLines();

    requestAnimationFrame(animate); /// enable a loop
}

(ps:确保将 poly-fill 从 requestAnimFrame 重命名为 requestAnimationFrame，请参见下面的演示链接)。

我们当然还需要启动动画循环，所以我们只是从全局范围调用它:

animate();

接下来我们需要确保您的线条正在移动，以便我们可以看到它们是动画的。

像现在的代码那样简单地提供一个偏移量不会直接开箱即用，因为您的缩放比例没有绑定(bind)到任何屏幕几何形状。

当您尝试通过重置偏移量来循环它们时，这会使线条“跳动”，或者，如果您选择不重置偏移量，则随着循环运行时间的延长，线条的大小会增加。

因此，您将不得不重新考虑如何划清界线或做出妥协。

为了妥协，您需要找到一个“最佳点”值，您可以在其中重置偏移循环。线条移动得越慢，小“跳跃”就越明显。

然而，为了使线条看起来平滑，您需要实现一些简单的 3D 投影(或类似于您已有但必须显示的 2.5D 伪 3D)。

Here is an online demo 现在使用偏移对线条进行动画处理。我在底部添加了一个 slider ，这样您就可以找到偏移限制的最佳位置。试验一下，看看它是如何工作的。我没有实现线的 3D 投影，而是使用了您已经拥有的东西，但根据这篇帖子，我感觉了解这里的基础知识将是第一步。