Canvas进阶-4、边界检测（流光，鼠标拖尾）

最新推荐文章于 2025-12-10 09:18:35 发布

原创

最新推荐文章于 2025-12-10 09:18:35 发布 · 659 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#计算机外设 #javascript #开发语言 #前端

1. 什么是边界检测？

在之前的开发中，物体在运动过程中一旦超出画布，就会消失，今天学习如何去检测是否碰到了边界，碰到边界后又会有哪些处理的办法。

边界检测，就是物体运动的限制范围。边界检测的范围，既可以是画布的某个区域，也可以是整个画布。

下面是一个代码示例：

请添加图片描述

 <canvas id="myCanvas"></canvas>

 init() {
   
   
      //定义一个球
      class Ball {
   
   
        constructor(x, y) {
   
   
          this.x = x
          this.y = y
          this.radius = 10 //球的半径
          this.color = 'red' 
        }
        fill(context) {
   
   
          context.beginPath()
          context.arc(this.x, this.y, this.radius, 0, Math.PI * 2)
          context.fillStyle = this.color
          context.fill()
          context.closePath()
        }
      }
      const cnv = document.getElementById('myCanvas')
      const cxt = cnv.getContext('2d')
      // 初始化一个小球
      const ball = new Ball(0, cnv.height / 2)
      const vx = 2

      ;(function frame(