Comment générer dynamiquement une forme de polygone qui se déplace vers le haut dans Canvas?

Question

En ce moment, ce que j'ai est montré dans ce violon: https://jsfiddle.net/p0o5fvdm/

Ce que je veux est le polygone de se déplacer en douceur et remplir la partie ci-dessous avec une couleur plus noire qui couvre une largeur aléatoire qui est aligné avec le polygone et continue à se déplacer en douceur comme la partie supérieure. J'ai essayé d'utiliser le code suivant, mais il ne conserve pas la forme du polygone d'origine et de nouveaux polygones sont dessinés sur les anciens, ce qui entraîne des flashes.

Ceci est ma fonction d'animation:

function animate(myShape, canvas, context, startTime) { 

    var time = (new Date()).getTime() - startTime; 

    myShape.y1 -= 1; 
    myShape.y2 -= 1; 
    myShape.y3 -= 1; 


    context.clearRect(0, 0, canvas.width, canvas.height); 

    drawShape(myShape, context); 


    requestAnimFrame(function() { 
     animate(myShape, canvas, context, startTime); 
    }); 
} 

I ajouté le code suivant pour définir dynamiquement la largeur du bord inférieur en utilisant le code suivant juste au-dessus context.clearRect.

if(myShape.y2 < 400) { 
    myShape.y2 = 400; 
    myShape.x2 = Math.random()*300; 
    myShape.y3 = 400; 
} 

Ceci est la valeur initiale de myShape:

var myShape = { 
    x1: 200, 
    y1: 0, 
    x2: 120, 
    y2: 400, 
    x3: 0, 
    y3: 400 
}; 

Ma toile a une hauteur de 400 pixels. C'est pourquoi je l'ai utilisé comme référence ici. Faites-moi savoir si j'ai besoin d'ajouter plus de détails.

Answer 1

Voici un plan pour avoir un polygone avec une largeur aléatoire qui défile en continu jusqu'à votre toile:

• Gardez un tableau de coordonnées aléatoire X, Y-augmentation qui forment votre polygone. Le premier élément array[0].y doit être inférieur à zéro.
• Le dernier élément, array[array.length-1].y, doit être supérieur à la hauteur de la toile.
• Animer en réduisant chaque array.y par 1 pendant chaque boucle d'animation.
• Lorsque le tableau [1] .y est réduit au-dessous de zéro, shift tableau [0] au début du tableau.
• Lorsque le dernier array.y est animé sur le canevas visuel, placez un nouvel élément dans le tableau ayant array.y supérieur à la hauteur du canevas.

Exemple de code et une démonstration:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var a=[ 
 
    {x:rx(),y:-Math.random()*100}, // y above canvas 
 
    {x:rx(),y:ry()}     // y below canvas 
 
]; 
 

 
// redraw 
 
draw(a); 
 

 
requestAnimationFrame(animate); 
 

 
function animate(){ 
 
    // update - move all y's upward 
 
    for(var i=0;i<a.length;i++){ a[i].y-=3; } 
 
    // test if a[1] is off top of canvas 
 
    if(a[1].y<0){a.shift();} 
 
    // test if last a[] is on canvas 
 
    if(a.length<2 || a[a.length-1].y<canvas.height){ 
 
     a.push({x:rx(),y:ry()}); 
 
    } 
 
    // redraw 
 
    draw(a); 
 
    // request another animation loop 
 
    requestAnimationFrame(animate); 
 
} 
 
// 
 
function draw(a){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,a[0].y); 
 
    for(var i=0;i<a.length;i++){ 
 
     ctx.lineTo(a[i].x,a[i].y); 
 
    } 
 
    ctx.lineTo(0,a[a.length-1].y); 
 
    ctx.fill(); 
 
} 
 
// 
 
function rx(){ return(canvas.width/2+Math.random()*200); } 
 
function ry(){ return(canvas.height*1.25+Math.random()*canvas.height/2); }

body{ background-color:white; } 
 
#canvas{border:1px solid red; }

<canvas id="canvas" width=512 height=512></canvas>