如何在javascript中从canvas中删除文本

我的问题是，当我点击按钮时，调用的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

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

请看这个jsFiddle的例子。

Answer 3

 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 4

你可以使用clearRect（）来清除canvas的一部分……

如果您知道文本字段的大小，请将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; } 

Answer 5

尝试先清除canvas：

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