Question

我设计了一个带有canvas的计数器。设计中的一切都很顺利但是当我想更改时间数并通过setInterval刷新它时，filltext start会自行创建并改变它的位置。代码示例在这里：

<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>

我想知道如何更改filltext文本而不创建自己。我只想更新文本。请帮我解决我的问题。谢谢

Answer 1

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

用ctx.clearRect(0, 0, canvas.width, canvas.height);

清除它

而不是在内部进行所有事情并更新计数器。

使用setInterval更新画布filltext文本

1 个答案: