JavaScript类内调用drawImage绘制canvas空白如何解决

画布刷新后空白和类的实现逻辑无关，核心原因是Image资源加载是异步行为：给img.src赋值后，浏览器会在后台请求图片资源，不会等待资源加载完成就直接执行后续的draw()调用，此时图片数据还未就绪，drawImage相当于绘制空内容，自然无法显示图像。
你提到的类外写法可以正常运行属于偶现情况：本质是测试时图片命中了浏览器缓存，加载速度极快，执行drawImage时资源刚好已经就绪，只要清空缓存强制刷新，这段代码一样会出现空白问题，本身就不符合规范。
你之前尝试把canvas作为参数传入draw方法没有效果，是因为这个操作根本没有解决异步加载的核心矛盾，和画布上下文传参没有关系。

方案1：类内部监听加载完成自动绘制 #

把图片加载监听逻辑封装在类内部，图片加载完成后自动触发绘制，不需要外部手动调用draw方法：

const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')

class Person
{
  constructor(name){
    this.name = name
    this.img = new Image()
    // 先绑定加载完成回调
    this.img.onload = () => {
      this.draw()
    }
    // 后赋值src，避免缓存场景下回调不触发
    this.img.src = 'some source'
  }
  draw(){
    ctx.drawImage(this.img,10,10)
  }
}

const peter = new Person('Peter Griffin')

方案2：增加加载状态标记，手动控制绘制时机 #

如果需要在外部统一控制所有资源的绘制时机，可以给类增加加载完成标记，避免未加载时无效调用draw：

const canvas = document.getElementById('main_canvas')
const ctx = canvas.getContext('2d')

class Person
{
  constructor(name){
    this.name = name
    this.isImgLoaded = false
    this.img = new Image()
    this.img.onload = () => {
      this.isImgLoaded = true
    }
    this.img.src = 'some source'
  }
  draw(){
    // 图片未加载完成时直接终止绘制
    if (!this.isImgLoaded) return
    ctx.drawImage(this.img,10,10)
  }
}

const peter = new Person('Peter Griffin')
// 等待页面所有资源加载完成后再统一调用绘制
window.onload = () => {
  peter.draw()
}

• 必须先给Image绑定onload监听，再给src属性赋值。如果顺序反过来，当图片命中本地缓存时，onload事件会在src赋值的瞬间触发，此时监听还未绑定，会直接错过绘制时机。
• 如果需要绘制多个人物实例，可以封装统一的资源加载器，等所有实例的图片都加载完成后再批量执行绘制，避免逐个触发渲染带来的性能问题。

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