在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函數。

祝好運！