1 var raf;
2 var arror = [];
3 var running = false;
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 }
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 }
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 }
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 }
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 })
相关文章
精彩导读
热门资讯
关注我们
