1 var raf; 2 var arror = []; 3 var running = false; 4 //繪製圓形 5 function createBall() { 6 return { 7 x: 0, 8 y: 0, 9 vx: 10-Mat... ...
1 var raf; 2 var arror = []; 3 var running = false; 4 //繪製圓形 5 function createBall() { 6 return { 7 x: 0, 8 y: 0, 9 vx: 10-Math.random()*10, 10 vy: 10-Math.random()*10, 11 radius: 25, 12 color:"red", 13 draw: function() { 14 ctx.beginPath(); 15 ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); 16 ctx.closePath(); 17 ctx.fillStyle = this.color; 18 ctx.fill(); 19 } 20 } 21 } 22 //繪製正方形 23 function createSquare() { 24 return { 25 x: 0, 26 y: 0, 27 vx: 10-Math.random()*10, 28 vy: 10-Math.random()*10, 29 color:"red", 30 draw: function() { 31 ctx.beginPath(); 32 ctx.fillStyle = this.color; 33 ctx.fillRect(this.x, this.y,30, 30); 34 ctx.closePath(); 35 } 36 } 37 } 38 //繪製五角星 39 function createStar() { 40 return { 41 x: 0, 42 y: 0, 43 vx: 10-Math.random()*10, 44 vy: 10-Math.random()*10, 45 color:"red", 46 draw: function() { 47 ctx.font = "24px serif"; 48 ctx.textBaseline = "hanging"; 49 ctx.fillStyle=this.color; 50 ctx.fillText("五角星",this.x, this.y); 51 52 } 53 } 54 } 55 //繪製三角形 56 function createTriangle() { 57 return { 58 x: 0, 59 y: 0, 60 vx: 10-Math.random()*10, 61 vy: 10-Math.random()*10, 62 color:"red", 63 draw: function() { 64 ctx.beginPath(); 65 ctx.moveTo(this.x,this.y); 66 ctx.lineTo(this.x+25,this.y+25); 67 ctx.lineTo(this.x+25,this.y-25); 68 ctx.fillStyle=this.color; 69 ctx.fill(); 70 } 71 } 72 } 73 //清除 74 function clear() { 75 ctx.fillStyle = 'rgba(255,255,255,0.3)'; 76 ctx.fillRect(0,0,canvas.width,canvas.height); 77 }
//判斷圖形坐標是否超出畫布範圍 78 function draw() { 79 clear(); 80 arror.forEach(function(ball, i){ 81 ball.draw(); 82 ball.x += ball.vx; 83 ball.y += ball.vy; 84 if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { 85 ball.vy = -ball.vy; 86 } 87 if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { 88 ball.vx = -ball.vx; 89 } 90 }); 91 92 raf = window.requestAnimationFrame(draw); 93 } 94 canvas.addEventListener('click',function(e){ 95 if (!running) { 96 raf = window.requestAnimationFrame(draw); 97 running = true; 98 } 99 var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"]; 100 var Graphics = ["Round","Square","Star","Triangle"]; 101 var typexz=Graphics[Math.floor(Math.random()*4)]; 102 var ball; 103 switch(typexz){ 104 case "Round": 105 ball = createBall(); 106 break; 107 case "Square": 108 ball = createSquare(); 109 break; 110 case "Star": 111 ball = createStar(); 112 break; 113 case "Triangle": 114 ball = createTriangle(); 115 break; 116 } 117 ball.x = e.clientX; 118 ball.y = e.clientY; 119 ball.color = colorarr[Math.floor(Math.random() * 10 + 3)]; 120 arror.push(ball); 121 }); 122 draw(); 123 document.addEventListener('keydown',function (e) { 124 if(e.keyCode==32){ 125 event.preventDefault(); 126 window.cancelAnimationFrame(raf); 127 running = false; 128 } 129 })