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