Canvas放置反弹效果随机图形(实例)

var raf;  var arror = [];  var running = false;  //绘制圆形  function createBall() {    return {      x: 0,      y: 0,      vx: 10-Math.random()*10,      vy: 10-Math.random()*10,      radius: 25,      color:"red",      draw: function() {        ctx.beginPath();        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);        ctx.closePath();        ctx.fillStyle = this.color;        ctx.fill();      }    }  }  //绘制正方形  function createSquare() {    return {      x: 0,      y: 0,      vx: 10-Math.random()*10,      vy: 10-Math.random()*10,      color:"red",      draw: function() {        ctx.beginPath();        ctx.fillStyle = this.color;        ctx.fillRect(this.x, this.y,30, 30);        ctx.closePath();      }    }  }  //绘制五角星  function createStar() {    return {      x: 0,      y: 0,      vx: 10-Math.random()*10,      vy: 10-Math.random()*10,      color:"red",      draw: function() {        ctx.font = "24px serif";        ctx.textBaseline = "hanging";        ctx.fillStyle=this.color;        ctx.fillText("五角星",this.x, this.y);      }    }  }  //绘制三角形  function createTriangle() {    return {      x: 0,      y: 0,      vx: 10-Math.random()*10,      vy: 10-Math.random()*10,      color:"red",      draw: function() {        ctx.beginPath();        ctx.moveTo(this.x,this.y);        ctx.lineTo(this.x+25,this.y+25);        ctx.lineTo(this.x+25,this.y-25);        ctx.fillStyle=this.color;        ctx.fill();      }    }  }  //清除  function clear() {    ctx.fillStyle = 'rgba(255,255,255,0.3)';    ctx.fillRect(0,0,canvas.width,canvas.height);  }　　　　//判断图形坐标是否超出画布范围  function draw() {    clear();    arror.forEach(function(ball, i){      ball.draw();      ball.x += ball.vx;      ball.y += ball.vy;      if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {        ball.vy = -ball.vy;      }      if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {        ball.vx = -ball.vx;      }    });    raf = window.requestAnimationFrame(draw);  }  canvas.addEventListener('click',function(e){    if (!running) {      raf = window.requestAnimationFrame(draw);      running = true;    }    var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"];    var Graphics = ["Round","Square","Star","Triangle"];    var typexz=Graphics[Math.floor(Math.random()*4)];    var ball;    switch(typexz){      case "Round":        ball = createBall();        break;      case "Square":        ball = createSquare();        break;      case "Star":        ball = createStar();        break;      case "Triangle":        ball = createTriangle();        break;    }    ball.x = e.clientX;    ball.y = e.clientY;    ball.color = colorarr[Math.floor(Math.random() * 10 + 3)];    arror.push(ball);  });  draw(); document.addEventListener('keydown',function (e) {   if(e.keyCode==32){     event.preventDefault();     window.cancelAnimationFrame(raf);     running = false;   } })