製作的主要思路是:每隔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");
