清除 canvas 中的文本不允许我重绘

Question

我正在 canvas 开发一款游戏（可能是更简单的方法，但我想学习 HTML5，等等）。无论如何，我有一个我正在处理的积分计数器，并且发生了两件事之一。

如果我在写入值之前不清除 canvas，它们都会（显然）重叠成不可读的内容

但是，如果我先清除上下文，然后再写入，我将一无所获。

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

该代码引用了 none 现有元素，该元素将在 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

希望对您有所帮助！

清除 canvas 中的文本不允许我重绘

Clearing text in canvas doesn't let me redraw

html

javascript

canvas

web