基于canvas在浏览器图像上画线 然后让线条自动吸附到目标区域附近可以根据颜色不同区分

以下是基于canvas在浏览器图像上画线并让线条自动吸附到目标区域附近的示例代码，可以根据线条颜色不同进行区分：

HTML代码：

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

JavaScript代码：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 目标区域颜色数组
var targetColors = [
  [255, 0, 0], // 红色
  [0, 255, 0], // 绿色
  [0, 0, 255]  // 蓝色
];

// 线条颜色数组
var lineColors = [
  [255, 0, 0], // 红色
  [0, 255, 0], // 绿色
  [0, 0, 255]  // 蓝色
];

// 线条对象数组
var lines = [];

// 鼠标位置
var mouse = {
  x: 0,
  y: 0
};

// 目标区域对象数组
var targets = [];

// 目标区域半径
var targetRadius = 50;

// 初始化
function init() {
  // 生成目标区域
  for (var i = 0; i < targetColors.length; i++) {
    var color = targetColors[i];
    var target = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      color: color
    };
    targets.push(target);
  }

  // 监听鼠标移动事件
  canvas.addEventListener("mousemove", function(e) {
    mouse.x = e.clientX - canvas.offsetLeft;
    mouse.y = e.clientY - canvas.offsetTop;
  });

  // 生成线条
  for (var i = 0; i < lineColors.length; i++) {
    var color = lineColors[i];
    var line = {
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      color: color,
      dx: 0,
      dy: 0
    };
    lines.push(line);
  }

  // 开始动画
  requestAnimationFrame(draw);
}

// 绘制目标区域
function drawTargets() {
  for (var i = 0; i < targets.length; i++) {
    var target = targets[i];
    ctx.beginPath();
    ctx.arc(target.x, target.y, targetRadius, 0, 2 * Math.PI);
    ctx.fillStyle = "rgb(" + target.color[0] + "," + target.color[1] + "," + target.color[2] + ")";
    ctx.fill();
  }
}

// 绘制线条
function drawLines() {
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    ctx.beginPath();
    ctx.moveTo(line.x, line.y);
    ctx.lineTo(line.x + line.dx, line.y + line.dy);
    ctx.strokeStyle = "rgb(" + line.color[0] + "," + line.color[1] + "," + line.color[2] + ")";
    ctx.stroke();
  }
}

// 绘制画布
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制目标区域
  drawTargets();

  // 计算线条位置
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];

    // 计算线条和目标区域的距离
    var distances = [];
    for (var j = 0; j < targets.length; j++) {
      var target = targets[j];
      var dx = line.x - target.x;
      var dy = line.y - target.y;
      var distance = Math.sqrt(dx * dx + dy * dy);
      distances.push(distance);
    }

    // 找到最近的目标区域
    var minDistanceIndex = 0;
    for (var j = 0; j < distances.length; j++) {
      if (distances[j] < distances[minDistanceIndex]) {
        minDistanceIndex = j;
      }
    }

    // 计算线条的运动方向和速度
    var target = targets[minDistanceIndex];
    var dx = target.x - line.x;
    var dy = target.y - line.y;
    var distance = Math.sqrt(dx * dx + dy * dy);
    var speed = 2;
    line.dx = dx / distance * speed;
    line.dy = dy / distance * speed;

    // 计算线条和目标区域的距离是否小于目标区域半径
    if (distance < targetRadius) {
      // 线条到达目标区域，重新随机位置
      line.x = Math.random() * canvas.width;
      line.y = Math.random() * canvas.height;
    }
  }

  // 绘制线条
  drawLines();

  // 循环动画
  requestAnimationFrame(draw);
}

// 初始化
init();

在上面的示例代码中，我们首先定义了目标区域颜色数组和线条颜色数组，然后生成了目标区域对象数组和线条对象数组，并监听了鼠标移动事件。

在绘制画布的过程中，我们先绘制了目标区域，然后计算每个线条和目标区域的距离，找到最近的目标区域，计算线条的运动方向和速度，绘制线条，并判断线条是否到达目标区域，如果到达了就重新随机位置。

最后，我们使用requestAnimationFrame函数循环动画。