思路：1. 先創(chuàng)建一個畫布
2. 在js創(chuàng)建一個var x = 0，y=0 代表 小球的x軸和y軸
3. 封裝一個小球 方便隨時可以調用 小球的x y軸 需要加上創(chuàng)建的x y軸 相當于加上一個隨時可以變化的x y軸。
4. 創(chuàng)建一個開關 var speedX = 1,seppdY=2
5. 計時器，進入計時器的時候清除小球,不然會生成很多個小球。隨便將speedx,y賦值給創(chuàng)建好的x和y。
6.臨界值判斷.向右移動,畫布的總寬度減去小球的寬度就是小球可以移動的距離。當小球到達臨界值的時候讓小球往回走，seppdx取反
7.臨界值判斷.向左移動,當移動到小球的寬度的時候。當小球到達臨界值的時候讓小球往回走，seppdx再次取反。seppedx就為正數小球向左移動，
8. 上下和左右臨界值判斷一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
background-color: hotpink;
}
</style>
</head>
<body>
<canvas id="box" width="800" height="400"></canvas>
<script>
var oBox = document.querySelector("#box");
var ctx = oBox.getContext("2d")
//先創(chuàng)建一個x y = 0 代表小球到坐標軸
var x = 0,y=0;
//開關
var speedX=1 ,seppdY=2;
//封裝一個函數 隨時可以調用小球
function boll() {
ctx.beginPath()
//小球+X 和+Y 等進入計時器等時候改變小球等坐標達到運動效果
ctx.arc(100+x,100+y,50,0,2*Math.PI,false)
ctx.stroke()
ctx.closePath()
}
boll()
setInterval(function () {
//進計時器先清除小球 不然會有很多個小球
ctx.clearRect(0,0,oBox.width,oBox.height)
//將開關賦值給x和y 等到達臨界點時讓sppend變?yōu)樨撝? x+=speedX;
y+=seppdY;
//當小球移動坐標移動到距離畫布的總寬度減去自身寬度讓小球反彈，到臨界點讓開關為負值以達到往回走到效果
if (100+x>oBox.width-50){
speedX=-speedX
//當小球回到原點自身寬度到時候，開關取反變?yōu)檎担^續(xù)往右走
} else if (100+x<50){
speedX=-speedX
}
//當小球移動坐標移動到距離畫布的總高度減去自身高度讓小球反彈，到臨界點讓開關為負值以達到往回走到效果
if (100+y>oBox.height-50){
seppdY=-seppdY
//當小球回到原點自身高度到時候，開關取反變?yōu)檎担? } else if (100+y<50){
seppdY=-seppdY
}
console.log(speedX);
console.log(seppdY);
boll();
},10)
</script>
</body>
</html>
