如何替换Canvas示例中的加号为自定义图片，实现鼠标移动跟随效果

完全可以在原有示例代码基础上改造，不需要重写整套鼠标跟随、缩放的交互逻辑，仅替换原本绘制加号的素材部分即可，最终可直接集成到客户网站使用。

改造核心 #

原示例中的加号，是通过临时离屏canvas绘制十字线条生成的临时素材，后续所有网格布局、鼠标感应位移、缩放动画的逻辑，都是基于这个临时素材的绘制位置实现的。替换为自定义图片时，只要把这个临时素材换成加载完成的自定义图片，所有原有交互逻辑完全不需要改动，就能实现一样的跟随效果。

分步操作流程 #

• 替换素材生成逻辑
  删除原本创建离屏canvas、绘制十字线条的代码，换成自定义图片的预加载逻辑：将自定义图片存放到客户网站的本地静态资源目录，通过原生Image对象加载，等待图片完全加载成功后，再启动后续的画布初始化和动画逻辑，避免出现绘制空白的问题。
• 调整绘制适配参数
  原临时离屏canvas尺寸为2020，绘制时使用了-10的坐标偏移、2020的绘制范围，保证加号的中心点和网格点位对齐。替换为自定义图片后，需要根据图片实际的宽高计算对应的偏移值和绘制尺寸，让图片的中心点和原有加号的中心位置完全重合，避免出现位移偏差。
• 删除冗余绘制代码
  原Plus.draw方法末尾有4行用来手动绘制十字线的代码，替换图片素材后这部分代码已经没有作用，直接删除即可，避免画布上叠加多余的线条。

关键修改代码片段 #

1. 替换原有的加号canvas创建部分：

// 删除原创建canvas2、画十字线的所有代码，替换为以下逻辑
let customIcon = new Image();
// 填写客户网站本地存放的自定义图片路径，禁止使用第三方跨域图片
customIcon.src = '/assets/icons/your-custom-pic.png';

// 图片加载完成后再初始化交互逻辑
customIcon.onload = () => {
  // 原有的canvas初始化、网格创建、GSAP监听tick、鼠标事件绑定的所有逻辑全部放到这里执行
}

2. 改造Plus类的draw方法：

Plus.prototype.draw = function(context){
  context.setTransform(
    this.scale, 
    0, 
    0, 
    this.scale,
    this.left + this.x, 
    this.top + this.y
  );

  // 替换原绘制临时canvas的逻辑，改为绘制自定义图片
  const iconSize = customIcon.width;
  context.drawImage(
    customIcon,
    -iconSize / 2, // 保证图片中心和网格点位对齐
    -iconSize / 2,
    iconSize,
    iconSize
  )  
  // 删除原有的moveTo/lineTo手动画十字的冗余代码
}

客户站集成注意事项 #

• 原代码依赖的GSAP动画库（TweenLite/TweenMax），需要确认客户网站是否已经引入，如果未引入，将GSAP核心文件存放到客户网站本地静态资源目录引用，禁止使用外部公共CDN，避免跨域或加载失败。
• 自定义图片建议提前做压缩处理，控制在合适的分辨率，避免增加页面加载负担。
• 原有canvas的宽高需要和客户网站的展示容器做响应式适配，不要写死固定像素值，避免不同尺寸设备上出现显示错位。
• 加载自定义图片时不要直接引用其他域名下的跨域图片，避免画布绘制时出现跨域报错。

内容的提问来源于stack exchange，提问作者shivam