javascript - 为什么我的图像不会出现在 Canvas 上？

Question

我想使用原型(prototype)绘制许多不同大小的圆圈，上面有相同的图像。问题是，圆圈上没有绘制图像。

圆圈仍然存在，因为在使用描边时它们是可见的，但没有绘制图像。我能够在没有原型(prototype)的情况下绘制一个带有图像的圆弧，但是一旦我使用它，它就不起作用了。

控制台中没有出现错误，所以我不清楚我遗漏了什么。我试过将事件监听器移到原型(prototype)之外，但圆圈图像仍然没有出现。

如果有人对为什么这不起作用有任何见解或者解决方案可以分享，我们将不胜感激。

代码如下:

const ctx = document.getElementById('canvas').getContext('2d');
class Balls {
  constructor(xPos, yPos, radius){
    this.xPos = xPos;
    this.yPos = yPos;
    this.radius = radius;
  }
}
Balls.prototype.render  = function(){
  const img = document.createElement('img');
  img.src = 'crystal.jpg';
  ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI*2)
  ctx.stroke();	
  ctx.clip();
  img.addEventListener('onload', function(e){
    ctx.drawImage(img, this.xPos - this.radius, this.yPos - this.radius, 
    this.radius*2, this.radius*2);
  });
};
let object = new Balls(100, 100, 50);
object.render();

<canvas id='canvas'></canvas>

Answer 1

给你，我只是在这里更改了 2 处以使你的代码工作。

1. load 用于 eventlistener 而不是 onload。
2. 使用箭头函数来依赖父上下文而不是动态上下文(this)。

const ctx = document.getElementById('canvas').getContext('2d');
class Balls {
  constructor(xPos, yPos, radius) {
    this.xPos = xPos;
    this.yPos = yPos;
    this.radius = radius;
  }
}
Balls.prototype.render = function() {
  const img = document.createElement('img');
  img.src = 'https://via.placeholder.com/150.png?text=vijay'
  ctx.arc(this.xPos, this.yPos, this.radius, 0, Math.PI * 2)
  ctx.stroke();
  ctx.clip();
  img.addEventListener('load', (e) => {
    ctx.drawImage(img, this.xPos - this.radius, this.yPos - this.radius,
      this.radius * 2, this.radius * 2);
  });
};
let object = new Balls(100, 100, 50);
object.render();

<canvas id='canvas'></canvas>