HTML Canvas中自定义Class对象渲染失败的问题排查与解决方案

问题核心原因 #

你遇到的问题本质是函数回调里的this指向错误。在Orb类的draw方法中，img.onload使用的是普通函数，此时回调里的this指向的是img元素本身，而不是Orb类的实例。这就导致this.xpos、this.ypos这些属性都是undefined，Canvas无法正确绘制圆形路径和图片，自然看不到渲染结果。

修复方案 #

方案1：使用箭头函数绑定this

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是Orb实例），直接修改draw方法即可：

draw(context) {
  const img = new Image();
  // 箭头函数让this指向Orb实例
  img.onload = () => {
    context.save();
    context.beginPath();
    context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(img, (this.xpos - this.radius), (this.ypos - this.radius), 64, 64);
    context.restore();
  }
  img.src = this.image;
}

方案2：提前保存实例引用

如果不想用箭头函数，可以在回调外把Orb实例的this保存到变量（比如self），回调里用这个变量访问实例属性：

draw(context) {
  const self = this; // 保存当前Orb实例的引用
  const img = new Image();
  img.onload = function() {
    context.save();
    context.beginPath();
    context.arc(self.xpos, self.ypos, self.radius, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(img, (self.xpos - self.radius), (self.ypos - self.radius), 64, 64);
    context.restore();
  }
  img.src = this.image;
}

优化方案：避免重复加载图片

每次调用draw都创建新的Image对象会重复加载资源，影响性能。可以把图片加载逻辑移到构造函数中，提前加载好图片：

class Orb {
  constructor(xpos, ypos, radius, speed, image) {
    this.xpos = xpos;
    this.ypos = ypos;
    this.radius = radius;
    this.speed = speed;
    this.image = new Image();
    this.image.src = convertSVG(image);
    // 标记图片加载状态
    this.isLoaded = false;
    this.image.onload = () => {
      this.isLoaded = true;
      // 加载完成后可以自动调用一次draw，避免需要手动触发
      // this.draw(context);
    }
  }
  draw(context) {
    if (!this.isLoaded) return; // 图片未加载完成时不绘制
    context.save();
    context.beginPath();
    context.arc(this.xpos, this.ypos, this.radius, 0, Math.PI * 2, false);
    context.clip();
    context.drawImage(this.image, (this.xpos - this.radius), (this.ypos - this.radius), 64, 64);
    context.restore();
  }
}

使用这个优化后的类，你只需要创建实例后，在合适的时机（比如动画循环中）调用draw方法即可。

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