画布上闪烁的点[重复]答案

【问题标题】：Flashing dots on canvas [duplicate]画布上闪烁的点[重复]
【发布时间】：2022-08-24 03:43:17
【问题描述】：

我不明白为什么这段代码不起作用。它应该只绘制一个覆盖屏幕的白色矩形。然后随机放置一个蓝点并等待循环完成。然后通过再次绘制白色矩形并关闭点然后重新绘制它来重复循环。

<!DOCTYPE html>
<html lang=\"en-US\">
  <head>
    <meta charset=\"UTF-8\"/>
    <title>Peripheral vision checker</title>


  <script type=\"application/javascript\">

    function draw() {
      // draw crosshairs


      var onFor = 1000;
      const intervalID = setInterval(mytimer, onFor);

      function mytimer()
      {
      // draw white rects

      function getRandomInt(max) {
              return Math.floor(Math.random() * max);
              }

      var x = 1280;//will be equal to window height
      var y = 720;//will be equal to window width

      const canvas = document.getElementById(\'canvas\');
      const ctx = canvas.getContext(\'2d\');
      ctx.fillStyle = \'white\';

      var xcoor =getRandomInt(x);
      var ycoor =getRandomInt(y);

      ctx.fillRect(0, 0, x, y);

        ctx.fillStyle = \'blue\';

        var radius = 10;
        moveTo(xcoor,ycoor);
        ctx.arc(xcoor, ycoor, radius, 0, 2 * Math.PI);

        //console.log(xcoor + \' \' + ycoor);//just temporary, to see they work
        ctx.fill();
    }

  }

  </script>
 </head>
 <h1>Peripheral vision checker</h1>
 <body onload=\"draw();\">
   <canvas id=\"canvas\" width=\"1280\" height=\"720\"></canvas>
 </body>
</html>

标签： javascript html canvas

【解决方案1】：

你需要beginPath 然后closePath

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8" />
  <title>Peripheral vision checker</title>


  <script type="application/javascript">
    function draw() {
      // draw crosshairs


      var onFor = 1000;
      const intervalID = setInterval(mytimer, onFor);

      function mytimer() {
        // draw white rects

        function getRandomInt(max) {
          return Math.floor(Math.random() * max);
        }

        var x = 500; //will be equal to window height
        var y = 250; //will be equal to window width

        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';

        var xcoor = getRandomInt(x);
        var ycoor = getRandomInt(y);

        ctx.fillRect(0, 0, x, y);

        ctx.fillStyle = 'blue';

        var radius = 10;
        ctx.beginPath();
        moveTo(xcoor, ycoor);
        ctx.arc(xcoor, ycoor, radius, 0, 2 * Math.PI);

        //console.log(xcoor + ' ' + ycoor);//just temporary, to see they work
        ctx.fill();

        // no need to: 
        // ctx.closePath();
      }

    }
  </script>
</head>
<h1>Peripheral vision checker</h1>

<body onload="draw();">
  <canvas id="canvas" width="500" height="250"></canvas>
</body>

</html>

【讨论】：

beginPath() 是否总是需要 closePath()？我认为 fill() 或 stroke() 相当于只是绘制它。
打开后关闭它似乎是一个好习惯。
没有 closePath 与 beginPath 没有关系。这根本不是一个好习惯。充其量是令人困惑的。 closePath 将只包含当前子路径，即它将 lineTo 最后一个 moveTo 坐标。
感谢您的澄清。确实，这些名称表明它们不相关（开始与结束）
我同意命名可能会令人困惑，但如果它们成对出现，那将是 open+close 或 begin+end。