Circle不会在画布上绘制

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

致电Map<People, Set<Sport>> mapping = new HashMap<>(); for (Sport s : sports) { for (People p : s.getPeopleWhoPlayThisSport()) { Set<Sport> sportByPeople = mapping.get(p); if (sportByPeople == null) { sportByPeople = new HashSet<>(); mapping.put(p, sportByPeople); } sportByPeople.add(s); } } List<Set<Sport>> groupings = new ArrayList<>(); outer: for (Set<Sport> sportSet : mapping.values()) { for (Set<Sport> group : groupings) { for (Sport s : sportSet) { if (group.contains(s)) { group.addAll(sportSet); continue outer; } } } groupings.add(sportSet); } System.out.println(groupings); 后，draw()的来电有drawcircles() - 这会清除画布（包括刚绘制的圈子）。

将ctx.clearRect移至drawcircles(); draw();之后将显示该圆圈。请注意，您必须等待一段时间才能在可见区域内绘制圆圈。