javascript - 如何在Canvas中动态生成向上移动的多边形形状？

Question

现在，我所拥有的显示在这个 fiddle 中:https://jsfiddle.net/p0o5fvdm/

我想要的是多边形平滑地向上移动，并用更多的黑色填充其下方的部分，该黑色跨越随机宽度，与多边形对齐，并像顶部一样保持平滑地向上移动。我尝试使用以下代码，但它不保留原始多边形的形状，并且新的多边形被绘制在旧的多边形上，导致闪烁。

这是我的动画功能:

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);
    });
}

我添加了以下代码，以使用 context.clearRect 上方的以下代码动态设置底部边缘的宽度。

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

这是myShape的初始值:

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

我的 Canvas 高度为 400 像素。这就是为什么我在这里使用它作为引用。如果我需要添加更多详细信息，请告诉我。

Answer 1

这里有一个具有随机宽度的多边形的计划，可以无限地向上滚动 Canvas :

• 保留一组随机的 X 坐标、Y 坐标递增的数组，以形成多边形。
• 第一个元素 array[0].y 应小于零。
• 最后一个元素 array[array.length-1].y 应大于 Canvas 高度。
• 通过在每个动画循环期间将每个 array.y 减 1 来进行动画处理。
• 当 array[1].y 减少到零以下时，将 array[0] 从数组开头移开。
• 当最后一个 array.y 动画到可视 Canvas 上时，将一个新元素插入 array.y 大于 Canvas 高度的数组中。

示例代码和演示:

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>