（萌新），我今天在网上看了看如何在Canvas画布上做出小球碰壁反弹的效果，然后自己试做一下，感觉良好，不知道还有什么需要改良。
首先我的思路是：
1.在body创建一个canvas标签，设置宽：500px，高：500px，id：“canvas”
2.在script标签获取canvas标签,获取上下文，然后开始画个圆圈（小球）。
3.小球运动需要有上下两个方向，定义 x和y ；也需要两个速度, 定义 speedX 和 speedY。
4.方向定义好后，加个定时器然小球运动，当小球移动的方向超过（Canvas的自身高度-小球的半径）或者小球移动的方向小于自身半径的时候，就会碰壁反弹。
5.小球运动之前先把画布全部清掉在运动。
好了，思路弄好之后就开始写代码了。
1.创建一个canvas
<body>
<canvas id="canvas" width = "500" height = "500" style = "border :1px solid black"> </canvas>
</body>
2.获取canvas标签，获取上下文，画小球
<script>
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(100+x,100+y,50,0,2*Math.PI,false); //小球的移动的距离随着 x , y 的增加而增加
ctx.stroke();
ctx.closePath();
｝
Ball();
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);//重绘 清除画布
x+=speedX; y+=speedY;
//当小球移动的方向超过（Canvas的自身高度-小球的半径）或者小球移动的方向小于自身半径的时候，就会碰壁反弹。
if(100+x > canvas.width - 50){
speedX = -speedX;
}else if(100+x < 50){
speedX = -speedX;
}
if(100+y > canvas.height - 50){
speedY = -speedY;
}else if(100+y < 50){
speedY = -speedY;
}
Ball();
},10)
</script>
嗯嗯，这样就大功告成了。
来自萌新的分享。
网友评论