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

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)

画布就像纸张一样，您可以在上面用铅笔写上所画的东西。 您不能选择特定对象，例如线条，文本，矩形，图像或任何已绘制的对象。 您可以清除并书写。