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

出现问题是因为您将所有代码放在一个函数中。大禁忌将其分为以下两部分：

创建：

$(document).ready(function() {            
    var canvas = document.getElementById("player1");
    var context = canvas.getContext("2d");

    context.scale(0.5, 0.5);
}

添加文字：

function 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);

}

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

1 个答案: