在画布上推随机数组对象

Question

我尝试用圆圈制作动画。每一秒都应该成为一个被推到画布上的圆圈。三个圆圈中的一个应随机挑选，因为球的颜色应该是随机的。如何在画布上每隔一秒随机推送它们？

这是我在stackoverflow上找到的一些代码（source），我为它编辑了一下：

var circle1={color: blue};
var circle2={color: yellow};
var circle3={color: orange};

var circles=[];
circles.push(circle1);
circles.push(circle2);
circles.push(circle3);

function drawCircle(circle){
      ctx.beginPath();
      ctx.arc(ballx * 108, canvasHeight / 2, x*5, 0, 2*Math.PI, false);
      ctx.fillStyle = 'circle.color';
      ctx.fill();

  }

这是我的实际代码：

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



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



    // 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();
//circle

var radius = x * 5;
    ctx.beginPath();
      ctx.arc(ballx * 108, canvasHeight / 2, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'yellow';
      ctx.fill(); 

  }

  function update() {
    ballx -= 0.1;


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


    }

  }







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

  }


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