Question

我正在使用画布进行游戏（可能更简单的方法，但我想学习HTML5等）。无论如何，我有一个积分计数器，我正在做两件事情中的一件。

如果在写入值之前我没有清除画布，那么它们（显然）重叠为无可读性

但是，如果我首先清除上下文然后写一下我最终没有任何内容。

PointsScored.prototype.writePointsToCanvas = function(){
    var canvas = document.getElementById("pointsScoredCanvas")
    var context = canvas.getContext("2d")
    context.clearRect(0, 0, canvasElement.width, canvasElement.height);

    context.fillStyle("black")
    context.font="30px Verdana"
    context.fillText("Score " + this.points, window.innerWidth * 0.8, window.innerHeight * 0.1)

}

如果您需要了解更多信息，请知道。我把所有内容都分散到文件和对象中（它让我把所有东西都扔到一个脚本下）。

Answer 1

代码引用了一个不存在的元素，该元素会在fillText调用之前破坏代码。

这一行：

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

应该是：

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

此外，fillStyle是一个属性，应如下所示：

context.fillStyle = "black";  // use as property, not method

希望这有帮助！

清除画布中的文字并不能让我重绘

1 个答案: