使用 setInterval 更新 canvas filltext 文本

Question

我设计了一个计数器 canvas.Everything 在设计上很不错，但是当我想更改时间编号并通过 setInterval 刷新它时，filltext 开始在其自身上创建并改变它的位置。代码示例在这里：

<canvas id="top-left" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById("top-left");
var ctx = canvas.getContext("2d");
ctx.beginPath();    
ctx.moveTo(canvas.width * 0.97,canvas.height * 0.06);
ctx.lineTo(canvas.width * 0.97,canvas.height * 0.97);
ctx.arc(canvas.width * 0.97,canvas.height * 0.97,canvas.width * 0.91,1*Math.PI,1.5*Math.PI);
ctx.moveTo(canvas.width * 0.97,canvas.height * 0.97);
ctx.lineTo(canvas.width * 0.06,canvas.height * 0.97);
ctx.shadowBlur = canvas.width * 0.016;
ctx.shadowOffsetX = canvas.width * 0.016;
ctx.shadowColor = "#666666";    
ctx.fillStyle = "#98ae32";
ctx.fill();
ctx.lineWidth = canvas.width * 0.01;
ctx.lineCap = "round";
ctx.strokeStyle = "#000000";
ctx.stroke();

var x = 1;  
var c = setInterval(function(){
   ctx.font = canvas.width * 0.273 + "px Baskerville Old Face";
   ctx.fillStyle = "#000000";
   ctx.fillText(x,canvas.width * 0.33,canvas.height * 0.86);   
   x++;
   if(x === 5){
      clearInterval(c);   
   }
},1000);
</script>

我想知道如何在不创建过度的情况下更改填充文本 itself.I 只是想更新 text.Please 帮助我解决我的问题。谢谢

Answer 1

你必须清除并重新绘制它。

清除它：ctx.clearRect(0, 0, canvas.width, canvas.height);

然后在间隔内执行所有操作并更新计数器。

使用 setInterval 更新 canvas filltext 文本

update canvas filltext text with setInterval

javascript

canvas

setinterval