圆圈不会在画布上绘制答案

【问题标题】：Circle won't be drawn on canvas圆圈不会在画布上绘制
【发布时间】：2015-09-04 00:11:25
【问题描述】：

您好，我尝试制作动画。一个圆圈应该从右到左。现在的问题是画布上没有画圆。我在 chromes 开发人员工具中检查了控制台日志，但没有错误。有人知道错误是什么吗？

      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>

【问题讨论】：

嗯，你的代码确实创造了一些东西，我可以看到画布上的项目，但它绝对不是一个动画圈......

标签： javascript html cordova canvas

【解决方案1】：

您在调用drawcircles() 后对draw() 的调用具有ctx.clearRect - 这将清除画布（包括刚刚绘制的圆圈）。

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

【讨论】：