前言

碰撞检测是后续定义小球运动的方向的一个常用方法不信的话,可以看之前以往关于canvas的知识点, 讲解下步骤吧

步骤分析

第一步

看过之前关于canvas的文章，相信大家，肯定知道，

document.querySelector 是获取画布的方法

那第一步也就是获取画布：只有我们先获取到了，才能对应的对之进行操作

第二步

既然已经获取到画布了，那接下来就是获取画布上下文

canvas.getContext('2d')

这两步是最基础的步骤，差不多，写canvas画布的时候，这两步常用

第三步

就是定义画布的宽高啊，x轴、y轴、r：半径，还有x轴的水平速度，y轴的垂直速度，最重要的一点是要清除画布这一点，也是canvas必用的方法，一定不要忘记了，然后在里面定义当小球碰到边缘时，速度取相反即可然后定义一个画小球的function ，这个方法是在清除画布的时候使用，是为了当小球这个运动完，就可清除画布，只留单个的轨迹

总代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="cont" width="500px" height="500px">你好呀</canvas>
  <script>
    // 使用原生js操作canvas
    // 1.获取画布
    var canvas = document.querySelector('#cont')
    // 2.获取画布的上下文
    var ctx = canvas.getContext('2d')
    // 画布宽高
    var w = h = 500
    let x = 100
    let y = 100
    let r = 20
   // 水平速度
   xSpeed = 2
   // 垂直速度
   ySpeed = 3
    setInterval(() => {  
      // 清除画布
      ctx.clearRect(0,0,w,h)
      // 在小球碰到边缘时,速度取相反即可
      if (x-r <=0 || x+r>=w) {
        xSpeed = -xSpeed
      }
      x = x + xSpeed
      if (y-r <=0 || y+r>=h) {
        ySpeed = -ySpeed
      }
      y = y + ySpeed
      // 水平运动
      draw(x,y,r)
    }, 10);
    // 画小球
    function draw(x,y,r) {
      ctx.beginPath()
      ctx.arc(x,y,r,0,Math.PI*2)
      ctx.fillStyle = 'gold'
      ctx.fill()
    }
  
  </script>
</body>
</html>

效果图

运行起来是个动图，你们可以自己试试

canvas之碰撞检测

前言

步骤分析

第一步

第二步

第三步

总代码

效果图