-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path直线运动.html
68 lines (56 loc) · 2.29 KB
/
直线运动.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直线运动</title>
</head>
<body>
<canvas id="canvas" width="600" height="300" style="background: #000;"></canvas>
<script src="ball.js"></script>
<script>
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var ballObj = [];
for(var i = 0; i<30; i++){
var ball = new Ball();
ball.x = canvas.width * Math.random();
ball.y = canvas.height * Math.random();
ball.radius = 3;
ball.fillStyle = changeColor()
ball.vx = Math.random() * 2;
ball.vy = Math.random() * 1;
ballObj.push(ball);
}
// var vx = Math.random() * 2; // 水平速度
// var vy = Math.random() * 1; // 垂直速度
// var speed = 5;
// var angle = 30;
function changeColor(){
return `rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},1)`
}
(function drawFrame(){
window.requestAnimationFrame(drawFrame);
context.fillStyle = 'rgba(0,0,0,.1)';
context.fillRect(0,0,canvas.width,canvas.height);
// cos 临边/斜边 vx/speed sin 对边/斜边 vy/speed
// var vx = Math.cos(angle * Math.PI/180) * speed;
// var vy = Math.sin(angle * Math.PI/180) * speed;
for(var i = 0; i < ballObj.length; i++){
if(ballObj[i].x > canvas.width - ballObj[i].radius || ballObj[i].x < ball.radius){
ballObj[i].vx = -ballObj[i].vx;
ballObj[i].fillStyle = changeColor()
}
if(ballObj[i].y > canvas.height - ballObj[i].radius || ballObj[i].y < ball.radius){
ballObj[i].vy = -ballObj[i].vy;
ballObj[i].fillStyle = changeColor()
}
ballObj[i].x += ballObj[i].vx;
ballObj[i].y += ballObj[i].vy;
ballObj[i].draw(context);
}
}())
}
</script>
</body>
</html>