• JS实现在一个Canvas中过n秒出现一个位数为m的随机数


    1. 如何实现Canvas中文字居中显示请参考:http://www.runoob.com/tags/canvas-textalign.html
    2. JS如何实现过N秒出现一个位数为M的随机数:
    • <button class="btn btn-info" onclick="countSecond()">Start</button> 先定义一个button。
    • <script type="text/javascript">
          var group = {{form2.group.data}};
          var digit = {{form2.digit.data}};
          var time = {{form2.time.data}};
          var t = time*1000;
      
          var c = document.getElementById("myCanvas");
          var ctx = c.getContext("2d");
          ctx.fillStyle="#98F5FF"
          ctx.fillRect(0, 0, 600, 400);
          var x=0;
          function countSecond() {
              if (x < group) {
                  x = x + 1
                  var Num = "";
                  for(var i=0;i<digit;i++){
                      Num+=Math.floor(Math.random()*10);
                  }
                  ctx.font = "100px Arial"
                  ctx.fillStyle = "#000000"
                  ctx.clearRect(0, 0, 600, 400);
                  ctx.textAlign="center";
                  ctx.fillText(Num, 300, 200)
                  setTimeout("countSecond( )", t)
      
              }
          }
      
      </script>

      巧妙利用字符串可以前后相加立即组成一个M位数的道理;setTimeout实现过t毫秒执行函数;ctx.clearRect()实现清空画布,不然fillText()会重叠显示。

  • 相关阅读:
    什么是云安全
    VMWare vForum 2013看点
    循环和数据的操作命令
    程序交互
    数据类型
    基础变量
    模块和包
    ['hello', 'sb']正则表达式
    os模块
    内置函数
  • 原文地址:https://www.cnblogs.com/godoyj/p/5817628.html
Copyright © 2020-2023  润新知