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