小球碰壁反弹加分_Javascript：Canvas的小球碰壁反弹

(萌新)，我今天在网上看了看如何在Canvas画布上做出小球碰壁反弹的效果，然后自己试做一下，感觉良好，不知道还有什么需要改良。

首先我的思路是：

1.在body创建一个canvas标签，设置宽：500px，高：500px，id：“canvas”

2.在script标签获取canvas标签,获取上下文，然后开始画个圆圈(小球)。

3.小球运动需要有上下两个方向，定义 x和y ；也需要两个速度, 定义 speedX 和 speedY。

4.方向定义好后，加个定时器然小球运动，当小球移动的方向超过(Canvas的自身高度-小球的半径)或者小球移动的方向小于自身半径的时候，就会碰壁反弹。

5.小球运动之前先把画布全部清掉在运动。

好了，思路弄好之后就开始写代码了。

1.创建一个canvas

2.获取canvas标签，获取上下文，画小球

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');//获取上下文(2d绘制)

var x = 0; var y = 0;//设置小球的方向

var speedX = 1; var speedY = 2; //给小球一个初始速度(如果给0的话会不动的，因为我试过，哈哈哈)。

function Ball(){    //(把小球放到一个函数里方便调用)

ctx.beginPath();

ctx.arc