animation de toile avec .clearRect (x, y, w, h)

Question

Je suis relativement débutant dans l'utilisation de javascript et canvas. Je vais essayer d'expliquer ce que j'ai fait jusqu'ici. J'ai une feuille de style externe, et j'ai mis l'arrière-plan de l'élément de toile (c'est l'image de fond d'une route qui traîne dans l'horizon). J'ai alors créé cette première fonction (drawRoad()) pour dessiner une fine bande de blanc au centre de la route, et l'amener à l'horizon avec la route. J'ai alors créé une autre fonction (roadLines()) qui insère des espaces dans cette bande blanche. Je suis heureux de la façon dont il semble ici jusqu'à présent. Ce que je veux faire maintenant est de lancer un cycle de ... drawRoad(), puis roadLines(), puis effacez le canevas, puis drawRoad() à nouveau, puis changez la position de roadLines() et appelez cette fonction à nouveau. Je veux déplacer la position des roadLines() vers le bas verticalement, de sorte que cela donne l'impression de rouler sur la route. (J'espère que cela a du sens?) Est-ce que je vais dans ce sens? Ou y a-t-il un moyen beaucoup plus facile de le faire que je néglige complètement?

Toutes les suggestions seraient grandement appréciées. Voici ce que j'ai fait jusqu'à présent. En outre, la fonction animate() est en bas, mais tout ce qu'elle fait est appeler drawRoad(), puis appeler 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

La première chose à faire est de faire en sorte que la boucle d'animation fasse une boucle. Comme il est maintenant il suffit d'appeler vos deux fonctions une fois et puis se ferme, alors premier ajustement peut être:

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

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

(ps: assurez-vous de renommer le poly-remplir requestAnimFrame-requestAnimationFrame, voir le lien de démonstration ci-dessous).

Nous allons bien sûr besoin aussi lancer la boucle d'animation donc quelque part que nous appelons simplement de portée mondiale:

animate(); 

La prochaine chose que nous devons nous assurer que vos lignes bougent afin que nous puissions voir les animent. Le simple fait de fournir un décalage tel que le code est maintenant ne fonctionnera pas dès la sortie de la boîte car vous n'avez pas d'échelle liée à la géométrie de l'écran. Cela va soit rendre les lignes "sautillantes" lorsque vous essayez de les boucler en réinitialisant le décalage ou, les lignes vont croître en taille plus la boucle tourne si vous choisissez de ne pas réinitialiser le décalage.

Vous devrez donc reconsidérer comment vous tracez les lignes ou faites un compromis. Pour un compromis, vous devez trouver une valeur "sweet spot" où vous réinitialisez la boucle de décalage. Plus la ligne se déplace lentement, plus le petit "saut" sera visible. Cependant, pour que la ligne paraisse lisse, vous devez implémenter une projection 3D simple (ou une pseudo 3D 2.5D similaire à ce que vous avez déjà mais que vous devez afficher).

Here is an online demo où les lignes sont maintenant animées en utilisant le décalage. J'ai ajouté un curseur en bas afin que vous puissiez trouver le sweet-spot pour la limite de décalage. Expérimentez avec pour voir comment cela fonctionne. Je n'ai pas mis en œuvre la projection 3D de la ligne mais j'ai utilisé ce que vous avez déjà mais j'ai le sentiment basé sur le post que comprendre le basic ici sera les premiers pas.