javascript - 圆不会在 Canvas 上绘制

Question

嗨，我尝试制作动画。一个圆圈应该从右向左延伸。现在的问题是 Canvas 上没有绘制任何圆圈。我检查了 chrome 开发者工具的控制台日志，但没有错误。有人知道错误是什么吗？

      window.onload = window.onresize = function() {
        var C = 1; // canvas width to viewport width ratio
        var el = document.getElementById("myCanvas");


        var viewportWidth = window.innerWidth;
        var viewportHeight = window.innerHeight;

        var canvasWidth = viewportWidth * C;
        var canvasHeight = viewportHeight;
        el.style.position = "fixed";
        el.setAttribute("width", canvasWidth);
        el.setAttribute("height", canvasHeight);
        var x = canvasWidth / 100;
        var y = canvasHeight / 100;
        var ballx = canvasWidth / 100;
        var n;


        window.ctx = el.getContext("2d");
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        // draw triangles


        function init() {
          ballx;
          return setInterval(main_loop, 1000);
        }



        function drawcircles() {
          function getRandomElement(array) {
            if (array.length == 0) {
              return undefined;
            }
            return array[Math.floor(Math.random() * array.length)];
          }

          var circles = [
            '#FFFF00',
            '#FF0000',
            '#0000FF'
          ];

          ctx.beginPath();
          ctx.arc(ballx * 108, canvasHeight / 2, x * 5, 0, 2 * Math.PI, false);
          ctx.fillStyle = JSON.stringify(getRandomElement(circles));
          ctx.fill();
          ctx.closePath;

        }

        function draw() {
          var counterClockwise = false;

          ctx.clearRect(0, 0, canvasWidth, canvasHeight);

          //first halfarc
          ctx.beginPath();
          ctx.arc(x * 80, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;
          //second halfarc
          ctx.beginPath();
          ctx.arc(x * 50, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;
          //third halfarc
          ctx.beginPath();
          ctx.arc(x * 20, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;


          // draw stop button
          ctx.beginPath();
          ctx.moveTo(x * 87, y * 2);
          ctx.lineTo(x * 87, y * 10);
          ctx.lineWidth = x;
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(x * 95, y * 2);
          ctx.lineTo(x * 95, y * 10);
          ctx.lineWidth = x;
          ctx.stroke();
          ctx.closePath;
          //circle



        }

        function update() {
          ballx -= 0.1;


          if (ballx < 0) {
            ballx = -radius;


          }

        }







        function main_loop() {
          drawcircles();
          draw();
          update();



        }


        init();

        function initi() {
          console.log('init');
          // Get a reference to our touch-sensitive element
          var touchzone = document.getElementById("myCanvas");
          // Add an event handler for the touchstart event
          touchzone.addEventListener("mousedown", touchHandler, false);
        }

        function touchHandler(event) {
          // Get a reference to our coordinates div
          var can = document.getElementById("myCanvas");
          // Write the coordinates of the touch to the div
          if (event.pageX < x * 50 && event.pageY > y * 10) {
            ballx += 1;
          } else if (event.pageX > x * 50 && event.pageY > y * 10) {
            ballx -= 1;
          }

          console.log(event, x, ballx);

          draw();


        }
        initi();
        draw();
      }

<div id="gameArea">
  <canvas id="myCanvas"></canvas>
</div>

Answer 1

在调用 drawcircles() 后对 draw() 的调用有一个 ctx.clearRect - 这会清除 Canvas (包括刚刚绘制的 Canvas )界)。

将drawcircles();移动到main_loop中的draw();之后将会出现圆圈。请注意，您必须等待一段时间才能在可见区域内绘制圆圈。