javascript - 在 Canvas 上仅显示几分之一秒的字符串

Question

我写了一段代码，其中我的话应该在点击开始按钮几秒钟后显示。我该怎么做？

function start()
    {

      block.x = 0;
      for (var i = 0; i < boxes.length; i++) 
      {
          resetbox(boxes[i]);


      }
    if (!continueAnimating) 
    {
        continueAnimating = true;
        animate();
    }
    }

我想将其显示 5 秒:var text=randomLetter(nu);

See Demo

Answer 1

我可以为您提供简单的演示，用于在单击按钮时在 1 秒内在 Canvas 中编写和清除文本:

DEMO

代码:

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");

function clear(){
     ctx.clearRect(0,0,c.width,c.height);
}

function write()
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.fillText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.fillStyle=gradient;
    ctx.fillText("Big smile!",10,90);
}

function start()
    {
        write();
        setTimeout(function(){
            clear();
        },1000);
    }