在html5画布中对多个自定义形状进行动画处理

Question

这是第一篇文章，因此如果我将问题的格式设置错误，我深表歉意。

在进行此项目之前，我曾有一些使用画布为多个圆圈设置动画的经验，但目前正在尝试制作定制字母Z的动画。

当前正在尝试使100个Z进行相同的操作，由于某种原因，我的构造函数对象仅绘制了一个。

到目前为止，我有：

• 控制台登录到我的绘制函数，以查看它是否走得太远了
• 控制台记录了Z个对象的数组，所有100个都在那里。
• 在该对象数组中，我检查了所有对象的x坐标，并且它们都不相同，因此我认为所有100个对象都不位于彼此的顶部。

我怀疑更新功能在我使用“ this”时有多严重

我想生病只是转储我的整个javascript文件，以防其他问题。 对不起，我不知道典型的协议。

---

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

canvasHeight = canvas.height;

canvasWidth = canvas.width

var dx = 0 
var dy = 0;
var direction = true

function Z(xCoord, yCoord, dx, dy, direction) {
    this.x = xCoord  
    this.y = yCoord    
    this.dy = dy    
    this.dx = dx    
    this.direction = direction


    this.update = function(){
        //making the Z wiggle
        if (this.dx < 20 && this.direction) {
            this.dx++
        }
        else if (this.dx === 20 && this.direction) {
            this.direction = false;
        }

        if (this.dx > -20 && !this.direction) {
            this.dx--
        }
        else if (this.dx === -20 && !this.direction)  {
            this.direction = true;
        }

        //if Z gets to top of page it resets down at the bottom
        if (this.dy === -canvasHeight - this.y) {
            this.dy = 0
        }

        this.dy--;
        this.draw()
    }

    this.draw = function() {
        context.clearRect(0, 0, context.canvas.width, context.canvas.height);
        context.translate(this.dx, this.dy); /// translate (move)

        //The Letter Z
        context.beginPath();

        context.moveTo(this.x, this.y + canvasHeight); // x+0
        context.lineTo(this.x+10, this.y + canvasHeight); // x+10
        context.lineTo(this.x+2, this.y + canvasHeight-9); // x+2
        context.lineTo(this.x+5, this.y + canvasHeight-9); // x+5
        context.lineTo(this.x+10, this.y + canvasHeight-9); // x+10
        context.lineTo(this.x+10, this.y + canvasHeight-10); // x+10
        context.lineTo(this.x, this.y + canvasHeight-10); // x+0
        context.lineTo(this.x+8, this.y + canvasHeight-1); // x+8
        context.lineTo(this.x, this.y + canvasHeight-1); // x+0
        context.lineTo(this.x, this.y + canvasHeight);  // x+0

        // complete custom shape
        context.closePath();
        context.lineWidth = 4;
        context.fillStyle = 'white';
        context.fill();
        context.strokeStyle = 'black';
        context.stroke();

        context.translate(-this.dx, -this.dy); /// translate (move)


    }

}

var ZArr = []
//for loop to make all the Z's
for (var index = 0; index < 100; index++) {

    var randomX = Math.random() * canvasWidth;
    var randomY = Math.floor(Math.random() * 500) + 1  

    var newZ = new Z(randomX, randomY, dx, dy, direction);

    ZArr.push(newZ)
}

// console.log(ZArr)

function executeFrame() {

    for (let index = 0; index < ZArr.length; index++) {
        ZArr[index].update();  
    }

    requestAnimationFrame(executeFrame);
}

//start animation
executeFrame();

Answer 1

移动context.clearRect(0, 0, context.canvas.width, context.canvas.height); 到渲染循环。 您删除阵列的每个循环中的每个图形。

function executeFrame() {
    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
    for (let index = 0; index < ZArr.length; index++) {
        ZArr[index].update();  
    }

    requestAnimationFrame(executeFrame);
}

Answer 2

这是因为您的透明画布行在Z对象的draw函数内部，因此每次您尝试绘制新的Z时都会清除该字段。这意味着只有数组中的最后一个可见。 只需移动这条线即可。

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

for循环上方的executeFrame函数。

祝好运！