（萌新）彰触，我今天在網上看了看如何在Canvas畫布上做出小球碰壁反彈的效果实牡，然后自己試做一下，感覺良好惨撇，不知道還有什么需要改良。
首先我的思路是：
1.在body創(chuàng)建一個canvas標簽府寒，設置寬：500px魁衙，高：500px，id：“canvas”
2.在script標簽獲取canvas標簽,獲取上下文株搔，然后開始畫個圓圈（小球）剖淀。
3.小球運動需要有上下兩個方向，定義 x和y 纤房；也需要兩個速度, 定義 speedX 和 speedY纵隔。
4.方向定義好后，加個定時器然小球運動炮姨，當小球移動的方向超過（Canvas的自身高度-小球的半徑）或者小球移動的方向小于自身半徑的時候捌刮，就會碰壁反彈。
5.小球運動之前先把畫布全部清掉在運動舒岸。
好了绅作，思路弄好之后就開始寫代碼了。
1.創(chuàng)建一個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(){ ? ?//(把小球放到一個函數(shù)里方便調用)
? ? ? ? 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>
嗯嗯役拴，這樣就大功告成了。
來自萌新的分享钾埂。
