canvas animation with .clearRect(x,y,w,h)

问题

I'm a relative beginner in using javascript and canvas. I'll try explain what I've done so far. I have an external style sheet, and I've set the background of the canvas element (it's background image of a road that trails off into the horizon). I have then created this first function (drawRoad()) to draw a thin strip of white down the center of the road, and have it trail off into the horizon with the road. I have then created another function (roadLines()) which inserts spaces in this white strip. I'm happy with how it looks here so far.

What I want to do now is to run through a cycle of... drawRoad(), then roadLines(), then clear the canvas, then drawRoad() again, and then change the position of roadLines() and call this function again. I want to move the position of roadLines() downwards vertically, so that it gives the effect of travelling down the road. (I hope this makes sense?) Am I going about this the right way? Or is there a much easier way to do it that I'm completely overlooking?

Any suggestions would be much appreciated. Below is what I've done so far. Also, the function animate() is at the bottom, but all it does is call drawRoad() and then call 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();
}

回答1:

The first thing you need to do is to actually have the animation loop doing a loop. As it is now it just call your two functions once and then quits, so first adjustment can be:

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

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

(ps: make sure you rename the poly-fill from requestAnimFrame to requestAnimationFrame, see demo link below).

We will of course need to also start the animation loop so somewhere we just call it from global scope:

animate();

The next thing we need to make sure is that your lines are moving so we can see them animate.

Simply providing an offset as the code is now won't work straight out of the box as you have scaling in not bound to any screen geometry.

This will either make the lines "jumpy" when you try to loop them by resetting the offset or, the lines will grow in size the longer the loop runs if you choose not to reset the offset.

So you will have to reconsider how you draw the lines or make a compromise.

For a compromise you would need to find a "sweet spot" value where you reset the offset loop. The slower the line moves the more visible the small "jump" will be.

In order to make the line appear smooth however, you will need to implement some simple 3D projection (or 2.5D pseudo 3D similar to what you already have but bound to display).

Here is an online demo where the lines are now animated using offset. I added a slider at the bottom so you can find the sweet-spot for offset limit. Experiment with it to see how it works. I did not implement 3D projection of the line but used what you already have but I have the feeling based on the post that understanding the basic here will be the first steps.

来源：https://stackoverflow.com/questions/19223390/canvas-animation-with-clearrectx-y-w-h

标签

javascript

animation

canvas