JS前端使用canvas实现物体的点选示例

下面是“JS前端使用canvas实现物体的点选示例”的完整攻略：

简介

本攻略旨在帮助JS前端开发者使用canvas实现物体的点选功能。点选，即用户点击鼠标后能够判断该处是否落在某个物体上，从而实现交互操作。

准备

在开始编写代码前，需要准备以下工具和材料：
- 编辑器：Visual Studio Code、Sublime Text、Atom等
- 浏览器：Chrome、Safari、Firefox等（建议使用Chrome）
- canvas画板：可以通过HTML中的<canvas>标签创建
- JavaScript库：本攻略使用了jQuery库，也可以使用其他库或不使用库。
- 图形资源：本攻略使用了一个矩形和一个圆形

实现步骤

1. 创建和初始化canvas画板
   ```html
   

   
   通过document.getElementById获取canvas元素，再通过getContext```获取2D画布上下文。

2. 在画板上绘制图形
   ```js
   context.fillStyle = "#00A0FF";
   context.fillRect(100, 100, 100, 100);

   context.fillStyle = "#FFA500";
   context.beginPath();
   context.arc(300, 300, 50, 0, Math.PI * 2);
   context.fill();
   ```
   这里绘制了一个蓝色的矩形和一个橙色的圆形，具体坐标和半径等可以自行设置。

3. 监听鼠标点击事件
   js
$("#canvas").click(function(e) {
let x = e.pageX - this.offsetLeft;
let y = e.pageY - this.offsetTop;
console.log(x, y);
});
   在canvas上注册鼠标点击事件，通过e.pageX和e.pageY获取鼠标点击处相对于画板左上角的横纵坐标。

4. 判断点击位置是否在图形内
   ```js
   let rectX = 100, rectY = 100, rectW = 100, rectH = 100;
   let radius = 50, centerX = 300, centerY = 300;

   $("#canvas").click(function(e) {
   let x = e.pageX - this.offsetLeft;
   let y = e.pageY - this.offsetTop;

   if (x >= rectX && x <= rectX + rectW && y >= rectY && y <= rectY + rectH) {
   console.log("点击了矩形");
   } else if ((x - centerX) * (x - centerX) + (y - centerY) * (y - centerY) <= radius * radius) {
   console.log("点击了圆形");
   } else {
   console.log("未点击任何图形");
   }
   });
   ```
   通过比较鼠标点击位置和图形位置、大小，判断点击位置是否在图形内。以上代码展示了判断矩形和圆形，其他图形判断方式类似。

示例说明

示例一：小球消失

在这个示例中，我们将在html页面上绘制一个小球，每次点击小球，小球就会消失。

首先，需要在html中创建画板和小球：

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

<script>
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");

  let ballX = 100, ballY = 100, ballR = 50;

  context.beginPath();
  context.arc(ballX, ballY, ballR, 0, Math.PI * 2);
  context.fillStyle = "#FFA500";
  context.fill();
</script>

绑定鼠标点击事件，并在事件处理函数中判断点击位置是否在小球内，若在，则清空画板，否则不做任何处理。

$("#canvas").click(function(e) {
  let x = e.pageX - this.offsetLeft;
  let y = e.pageY - this.offsetTop;

  let distance = Math.sqrt((x - ballX) * (x - ballX) + (y - ballY) * (y - ballY));
  if (distance <= ballR) {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }
});

这里通过勾股定理计算鼠标点击位置与小球圆心的距离，若小于等于小球半径，则表示点击在小球内。

示例二：物体跟随鼠标移动

在这个示例中，我们将在html页面上绘制一个矩形和一个圆形，使得物体可以跟随鼠标移动。

首先，需要在html中创建画板和矩形、圆形：

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

<script>
  let canvas = document.getElementById("canvas");
  let context = canvas.getContext("2d");

  let rectX = 100, rectY = 100, rectW = 100, rectH = 100;
  let radius = 50, centerX = 300, centerY = 300;

  context.fillStyle = "#00A0FF";
  context.fillRect(rectX, rectY, rectW, rectH);

  context.fillStyle = "#FFA500";
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, Math.PI * 2);
  context.fill();
</script>

绑定鼠标移动事件，并在事件处理函数中获取鼠标位置，并通过requestAnimationFrame不断地重绘图形。

let rectLeft, rectTop, circleLeft, circleTop;

$("#canvas").mousemove(function(e) {
  rectLeft = e.pageX - this.offsetLeft - rectW / 2;
  rectTop = e.pageY - this.offsetTop - rectH / 2;
  circleLeft = e.pageX - this.offsetLeft - radius;
  circleTop = e.pageY - this.offsetTop - radius;

  animate();
});

function animate() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "#00A0FF";
  context.fillRect(rectLeft, rectTop, rectW, rectH);

  context.fillStyle = "#FFA500";
  context.beginPath();
  context.arc(circleLeft, circleTop, radius, 0, Math.PI * 2);
  context.fill();

  requestAnimationFrame(animate);
}

这里通过减去图形的一半尺寸，将图形的中心点（即矩形的左上角和圆形的圆心）与鼠标位置对齐。并通过不断地重绘来实现跟随移动。注意需要清空画板，否则图形会留下痕迹。