Question

现在，我所拥有的东西在这个小提琴中显示出来：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
};

我的画布高度为400像素。这就是为什么我在这里使用它作为参考。如果我需要添加更多详细信息，请与我们联系。

Answer 1

这里计划有一个随机宽度的多边形，无限地向上滚动画布：

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

示例代码和演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: