javascript - 如何在 Javascript 中从画布中删除文本

Question

我的问题是，当我单击按钮时，callfunction()调用方法并且计数器增加 5，当我再次单击计数器增加 5 并在给定位置显示 10 时，我的问题是当计数器增加时，以前的数字不会被删除并显示在前一个数字上增加数字。我想删除以前的数字并显示下一个递增的数字。我有以下代码：

var count=0;
function callfunction()
   {
         context.fillText(count,200,200);
         count = count+5;
         //context.fillText("",200,200);
   }

Answer 1

fillText与背景颜色，如果它是单色的。或者将之前的内容保留为图像数据，然后在您想删除文本时将其粘贴。

Answer 2

尝试先清除画布：

    var count=0;
    function callfunction()
   {
         context.clearRect ( 0 , 0 ,canvas.height , canvas.width );
         context.fillText(count,200,200);
         count = count+5;
         //context.fillText("",200,200);
   }

Answer 3

我知道的唯一方法是使用清除整个画布元素canvas.fillRect。

请参阅此jsFiddle以获取示例。

Answer 4

count = 0;
function update(){
    canvas.clearRect(0,0,canvas.width,canvas.height);
    canvas.fillText(count,200,200);
    //Draw anything else...

}

setInterval("update()",1000/60); //60 Frames per second

button.onclick = function(){ //Change button to your button element
    count += 5;
}

这应该工作！

Answer 5

您可以使用 clearRect() 来清除画布的一部分...

如果您知道文本字段的大小，请将 clearRect() 设置为一个大到足以清除该文本字段的矩形：

var count=0;
function callfunction()
   {
    context.clearRect(200, 190, 50, 10); // clears a text field 50 x 10, above baseline
    context.fillText(count,200,200);
    count = count+5; 
   }