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)

Canvas就像一张纸，你可以用魔法铅笔写下你画的东西。您无法选择特定对象，如线条，文字，矩形，图像或您绘制的任何内容。你可以清楚地写下来。

如何以预定方式更改Canvas上的文本

1 个答案: