制作的主要思路是:每隔1秒,重新在画布上画小球,当然画之前需要重新定位小球的圆心。
还有一个问题,那就是画之前,前一个圆需要清除,所以我在这里，重新将背景画了一遍，
覆盖了原先的背景。以下是具体的代码。
1.这是html页面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作一个小球弹跳的动画
</title>
<style type="text/css">
canvas{
border:
1px solid blue;
}
</style>
</head>
<body>
<div>
<canvas id="canvas1" width="500" height="300"></canvas>
</div>
</body>
</html>
2.javascript的内容(可以直接写在html页面中,也可以单独定义一个js文件,然后在引入)
function draw20(id) {
//获取canvas的上下文
var canvas =
document.
getElementById(id);
if (
canvas ==
null){
return false
};
var context =
canvas.
getContext(
"2d");
//调用定时函数
var interal =
setInterval(
function () {
move(
context)},
4);
}
var x =
100;
//圆形开始X坐标
var y =
100;
//圆形开始Y坐标
//小球的移动方向
var mx =
0;
//0右 1左
var my =
0;
//0下 1上
var mmx =
1;
//每次x轴移动的长度
var mmy =
1;
//每次y轴移动的长度
var radius =
5;
//圆形的半径
var cw =
500;
//canvas宽度
var ch =
300;
//canvas高度
function move(context) {
//这个是设置背景
context.
fillStyle =
"#EEEEFF";
context.
fillRect(
0,
0,
500,
300);
//这个是设置小球
context.
beginPath();
//设置开始路径
context.
fillStyle =
"red";
//设置填充颜色
context.
arc(
x,
y,
radius,
0,
Math.
PI*
2,
true);
//画路径
context.
closePath();
//关闭路径
context.
fill();
//填充圆形
//判断移动的方向
if(
x+
radius>=
cw){
//到达最右边
mx =
1;
//左移
mmx = -
1;
}
if(
x<=
radius){
//到达最左边
mx =
0;
//右移
mmx =
1;
}
if(
y+
radius>=
ch){
//到达最下边
my =
1;
//上移
mmy = -
1;
}
if(
y <=
radius){
my =
0;
mmy =
1;
}
x=
x+
mmx;
y =
y+
mmy;
}
draw20(
"canvas1");
转载请注明原文地址: https://www.6miu.com/read-13521.html
