❤ ❤canvas画布检测碰撞小球❤ ❤

一、实现效果 ❤ ❤

小球在规定的区域内自由碰撞，碰到墙壁后不会超出界限，会发生反弹

二、实现思路❤ ❤

首先创建画布

<canvas id="can" width="500" height="500"></canvas>

var can =document.getElementById("can");
var ctx=can.getContext('2d');
       

然后创建一个小球

ctx.beginPath()
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fillStyle="gold";
ctx.strokeStyle="gold"
ctx.fill()
ctx.stroke()
ctx.closePath()
ctx.restore()
ctx.save()

接着想办法让小球运动起来，先设定能让小球动起来的变化值，我们可以让小球的坐标x和y不断改变来使小球运动起来
先把小球的绘制封装在一个函数中，这样我们可以直接调用小球

 function drawCircle(x,y,r){
   
 // ctx.save();
     ctx.beginPath()
     ctx.arc(x,y,r,0,2*Math.PI);
     ctx.fillStyle="gold"