如何定期更改畫布上的文本

Question

如何使用“圖像”和“文本”繪制畫布，其中的文本會定期更新新值。 我面臨的問題是新文本在舊文本上書寫而未清除。

<canvas id="product1" width="184" height="239"/>
var img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0, img.width,img.height,0, 0, 184, 239);
context.font = "20pt Calibri";
context.textAlign="center"; 
context.fillText("Product 1",150,120);  
};
img.src = "https://image.ibb.co/gWNAoa/KEG.jpg";


setInterval(function() {
            var context = document.getElementById('product1').getContext("2d").fillText(Math.random(),150,120); 

        }, 2000);

Answer 1

您必須清除畫布，重新繪制圖像並繪制新文本。

或者，如果您知道文本的位置，則僅清除文本所在的區域並繪制新文本。

使用clearRect(x,y,width,height)

畫布就像紙張一樣，您可以在上面用鉛筆寫上所畫的東西。 您不能選擇特定對象，例如線條，文本，矩形，圖像或任何已繪制的對象。 您可以清除並書寫。