在画布上显示字符串仅显示几分之一秒

Display a string on canvas for only fraction of seconds

本文关键字：显示 分之一 字符串      更新时间：2023-09-26

我写了一个代码，其中我的单词应该在单击开始按钮时显示几分之一秒。我该怎么做？

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

查看演示

我可以给你一个简单的演示，在按钮点击 1 秒内在画布中编写和清除文本：

演示

法典：

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);
    }

尝试下面的代码 - 你必须使用 setTimeout（）

单击此处查看工作演示

.HTML 

<div id="someDiv">Your Text Here</div>
<input id="SomeButton" type="button" value="Start">

Jquery

$(document).ready(function(){
       $("#someDiv").hide();
    $("#SomeButton").click(function(){            
        start();
    });        
});
function start()
{
    $("#someDiv").show();
    setTimeout(function () {
                    $("#someDiv").fadeOut(1000, function () { $(this).hide(); });
                }, 2000);
}
相关文章：