正文
html5 方框内的小球
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5 方框内的小球
版本一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10,WIDTH,HEIGHT,RADIUS=10;
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
//小球方向，默认为1，向右下
var direction=1;
WIDTH= canvas.width;
HEIGHT= canvas.height; //小球走
setInterval(function () {
//1.判断方向，决定小球的横纵坐标
//2.判断方向变化
if(direction==1){
// 右下
x++;
y++;
if(y>=HEIGHT-RADIUS){
direction=2;
}
if(x>=WIDTH-RADIUS){
direction=4;
}
}else if(direction==2){
//右上
x++;
y--;
if(x>=WIDTH-RADIUS){
direction=3;
}
if(y<=RADIUS){
direction=1;
}
}else if(direction==3){
// 左上
x--;
y--;
if(y<=RADIUS){
direction=4;
}
if(x<=RADIUS){
direction=2;
}
}else if(direction==4){
// 左下
x--;
y++;
if(x<=RADIUS){
direction=1;
}
if(y>=HEIGHT-RADIUS){
direction=3;
}
}
d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
},20); });
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>
版本二
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10; // 圆坐标
var WIDTH,HEIGHT,RADIUS=10;
xx=1;yy=1; // 步长
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
WIDTH= canvas.width;
HEIGHT= canvas.height;
//小球走
setInterval(function () {
if(x < RADIUS || x >= WIDTH-RADIUS){ // 一开始坐标就相等了，要去掉=号 x = radius
xx *= -1;
}
//判断小球纵向边界
if(y < RADIUS || y >= HEIGHT-RADIUS){
yy *= -1;
}
x += xx;
y += yy;
d.clearRect(0,0,WIDTH,HEIGHT); // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
},20); });
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>
