-
Notifications
You must be signed in to change notification settings - Fork 0
/
test_change.html
64 lines (59 loc) · 1.29 KB
/
test_change.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display: block;margin:50px auto">
你的浏览器不支持Canvas,请更换浏览器后再试!!
</canvas>
<script>
var ball = {x:512,y:100,r:20,g:2,vx:4,vy:0,color:"#005588"}
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 1024;
canvas.height = 768;
var context = canvas.getContext("2d");
setInterval(
function(){
render(context);
update();
console.log("11")
},
50
)
}
function update(){
ball.x += ball.vx
ball.y += ball.vy
ball.vy += ball.g
if(ball.y>=768 - ball.r){
ball.y = 768 - ball.r
ball.vy = -ball.vy*0.5
}
if(ball.x>=1024 - ball.r){
ball.x = 1024 - ball.r
ball.vx = -ball.vx*0.5
console.log("heihei")
}
if(ball.y<=0 - ball.r){
ball.y = 0 - ball.r
ball.vy = -ball.vy*0.5
}
if (ball.x<=0 - ball.r) {
ball.x = 0 - ball.r
ball.vx = -ball.vx*0.5
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height)
cxt.fillStyle = ball.color
cxt.beginPath()
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
cxt.closePath()
cxt.fill()
}
</script>
</body>
</html>