HTML5更新画布重复并再次缩放

Question

我只是第一次尝试在html5中使用画布，我遇到了一个问题，我希望这个问题很容易解决，但我找不到答案。

基本上，当文档加载时，我可以在画布中绘制一个形状，然后我想在其中添加一些文本并更新画布。画布从0.5比例开始，但当我尝试添加文本并重绘画布时，它会在现有画布上以我假设的0.25比例绘制。

所以我相信画布是在原始画布上重新绘制的，比例是堆叠的吗？

下面是我正在做的事情的简化版本：

$(document).ready(function() {
    playerID = "";
    createCanvas();
}


function createCanvas(){

    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    context.scale(0.5, 0.5);

  //code to draw the shape


    var x = 28;
    var y = 45;
    context.font = "20pt Calibri";
context.fillStyle = "#ffffff";
context.fillText(''+playerID+'', x, y);

  };


function playerNumber(){
 playerID = 5;
 createCanvas();
 }

有没有什么方法可以在我再次绘制之前清除画布来解决这个问题，或者我可以更新/刷新画布吗？

我真的不确定该怎么做，任何帮助都会很好。谢谢。

Answer 1

问题来了，因为你把你所有的代码放在一个函数中。最大的禁忌。

将其分为两个部分，如下所示：

1. 创建：

$(文档).ready(function(){ var canvas = document.getElementById("player1")；var context = canvas.getContext("2d")；context.scale(0.5，0.5)；}

• 添加文本：

函数playerNumber(){ var playerID = 5；var canvas = document.getElementById("player1")；var context = canvas.getContext("2d")；var x= 28；var y= 45；context.font = "20pt Calibri"；context.fillStyle = "#ffffff"；context.fillText(''+playerID+''，x，y)；}