嘗試在畫布（JS）中更新計時器-有解無憂

我正在嘗試重新創建一款受 New Super Mario Bros. 中名為“Wanted!”的迷你游戲啟發的游戲。這是情況：

我正在嘗試使用 JavaScript 設定一個 10 秒的倒數計時器。當計時器倒計時時，我希望計時器每隔一秒重繪一次。但是正如您將在下圖中看到的，計時器會自行寫入。我試圖用純 JavaScript 來做到這一點，但如果 HTML 是首選方法，它也可以作業。請記住，這是一個靜止幀。這是我所擁有的：

function drawTimer() {
        var timeLeft = 10; // Set seconds
        let countDown = setInterval(function() {
            // Check if we reached 0.
            if (timeLeft <= 0) {
                alert("Time's up!");
                isWinner = false;
                document.location.reload(); // reload the page
                clearInterval(countDown);
            }
            else { // Less than 10,
                requestAnimationFrame(drawTimer);
                ctx.beginPath();
                ctx.font = "16px Arial";
                ctx.fillStyle = "#FFFFFF";
                ctx.strokeStyle = "#000000";
                ctx.fillText("Time left: "   timeLeft, 200, 20);
                ctx.closePath();
            }
            timeLeft -= 1;
        }, 1000);
}

這是它的樣子：嘗試在畫布（JS）中更新計時器

uj5u.com熱心網友回復：

不確定您是否了解畫布的作用。正如它所說，它只是一個“畫布”，您可以繪制像素。

例如，如果你畫了一些東西，你想把它移動到某個地方，你應該在應該移動的地方畫新的像素并洗掉以前的像素。就像你在紙上畫一個圓圈，想把它畫（移動）到另一個地方（那將是另一個框架），你應該洗掉當前的圓圈并在另一個地方畫一個新的。

在您的情況下，為了顯示您繪制像素的計時器文本，每個繪制的像素將保留在畫布上，除非您在某個時候將其擦除。您應該找到一種方法來擦除它，但更容易的是在 html 中擁有一個位于畫布上方（絕對位置）的元素，并且您不會遇到重繪問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/340770.html

標籤：javascript html

上一篇：獲取陣列中所有選定的復選框以POST到API

下一篇：在JSON陣列中轉儲二進制檔案內容