清除 Canvas 后，JavaScript Canvas 元素不显示

Question

我已经开始使用 Canvas 开发小型 JavaScript 游戏。所以我需要在 Canvas 上显示多张卡片。 但我似乎在使用 updateGameArea() 函数中的 gameArea.clear(); 方法后，一张卡片未显示。但如果不使用 gameArea.clear(); 方法，这些卡片显示效果很好。但我需要多张卡片。

这是我的 JavaScript 代码

var cards = [];
var selectedCards = [];
var select = true;

window.addEventListener('DOMContentLoaded', function () {
    startGame();
});

function startGame() {
    cards.push(new PlayingCard("blue", 5, 150, 10));
    cards.push(new PlayingCard("red", 1, 10, 10));
    gameArea.click();
    gameArea.start();
}

var gameArea = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 100);
    },
    click: function () {
        this.canvas.addEventListener('click', getPosition);
    },
    clear: function () {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
};

function getPosition(e) {
    var top = this.offsetTop;
    var left = this.offsetLeft;
    var x = e.pageX - left;
    var y = e.pageY - top;

    cards.forEach(function (card) {
        if (y > card.y && y < card.y + card.height && x > card.x && x < card.x + card.width) {

            card.selected = select;

            if (selectedCards.length < 2) {
                selectedCards.push(card);
            } else {
                selectedCards = [];
                selectedCards.push(card);
            }

            if (selectedCards.length === 2) {
                selectedCards.forEach(function (selected_card) {
                    selected_card.x = 400;
                    if (selected_card.selected === select) {
                        console.log(selected_card);
                    }
                });
            }
        }
    });
}

function PlayingCard(color, value, x, y) {
    this.color = function () {
        if (color === 'red') {
            return "#E53935";
        } else if (color === 'blue') {
            return "#0D47A1";
        } else {
            throw new Error("No Color Code Found!");
        }
    };
    this.value = value;
    this.width = 120;
    this.height = 160;
    this.x = x;
    this.y = y;
    this.selected = false;

    this.update = function () {
        var ctx = gameArea.context;
        ctx.fillStyle = this.color();

        ctx.shadowBlur = 8;
        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';

        ctx.fillRect(this.x, this.y, this.width, this.height);
    };
}

function updateGameArea() {
    cards.forEach(function (card) {
        gameArea.clear();
        card.update();
    });
}

Answer 1

每次抽牌时都会调用 gameAera.clear()。所以这就是为什么只显示最后一张卡片的原因。

function updateGameArea() {
    gameArea.clear(); // Move the gameArea.clear(); here

    cards.forEach(function (card) {
        card.update();
    });
}