帆布动画与.clearRect(X,Y,W,H)(canvas animation with .cl

2019-10-18 17:32发布

我在使用JavaScript和画布相对初学者。 我会试着解释一下我到目前为止已经完成。 我有一个外部的样式表,我已经设置画布元素的背景(它是落后消失在地平线的道路的背景图像)。 我已经然后创建该第一函数(drawRoad())来绘制的白色的道路的中心的薄带,并将其关闭落后与路面地平线。 我已经然后,创建另一个函数(roadLines()),其插入在该白色带空格。 我很高兴与它的外观到这里为止。

我想现在要做的就是通过... drawRoad()循环运行,然后roadLines(),然后清除画布,然后drawRoad()再次,然后更改roadLines(的位置),并再次调用这个函数。 我想移动roadLines的位置()垂直向下,所以它给行驶在路上的效果。 (我希望这是有道理的?)我要对这个正确的方式? 还是有更简单的方法来做到这一点的是,我完全可以俯瞰?

任何建议将不胜感激。 下面是我到目前为止已经完成。 此外,功能动画()是在底部,但它是所有调用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:请确保您重命名从聚填写requestAnimFramerequestAnimationFrame ,请参阅下面演示链接)。

当然,我们会还需要启动动画循环,这样的地方,我们只是把它从全球的范围:

animate();

我们需要确保接下来的事情是,你的行动,所以我们可以看到他们的动画。

简单地提供一个偏移量为代码现在,你有没有绑定到任何的屏幕几何比例将不直开箱的。

这要么使线“跳跃”当您尝试循环他们通过复位偏移,或将线条的规模增长的时间越长,如果你选择不复位偏移的循环运行。

所以,你将不得不重新考虑如何绘制线条或作出妥协。

对于一个妥协,你需要找到你复位偏移环路一个“甜蜜点”的价值。 慢行移动更为明显的小“跳”会。

为了使线条显得平滑然而,你将需要实现一些简单的3D投影(或2.5D伪3D类似于您已经有了,但势必会显示)。

下面是一个在线演示 ,其中线现在使用动画偏移。 我在底部添加了一个滑块,使您可以找到最佳位置胶印限制。 实验用它来看看它是如何工作的。 我并没有实现该行的3D投影,但使用你已经拥有的,但我有一个基于,了解基本的,这里将是第一个步骤后的感觉。



文章来源: canvas animation with .clearRect(x,y,w,h)