Canvas中SVG图像无法居中求助：SVG偏移至右下角

问题根源 #

你在Game构造函数里计算图像居中坐标时，SVG图像还没加载完成，此时this.image.width和this.image.height都是0，算出的x和y值等于画布中心坐标。等SVG加载完成后，代码依然用这个错误坐标绘制，自然就偏移到右下角了。PNG能正常显示是因为加载速度快或有缓存，构造函数执行时已经能拿到正确的宽高。

两种可行解决方法 #

方法一：监听图像加载事件，加载完成后计算坐标 #

修改Game类，通过onload事件确保图像加载完成后再计算居中位置：

class Game {
     constructor(gameWidth, gameHeight) {
          this.width = gameWidth;
          this.height = gameHeight;
          this.image = new Image();
          this.centerX = this.width / 2;
          this.centerY = this.height / 2;
          this.x = 0;
          this.y = 0;

          // 图像加载完成后更新坐标
          this.image.onload = () => {
               this.x = this.centerX - this.image.width * 0.5;
               this.y = this.centerY - this.image.height * 0.5;
          };
          this.image.src = option.introImage;
     }

     draw(context) {
          // 确保图像加载完成再绘制
          if (this.image.complete) {
               context.drawImage(this.image, this.x, this.y);
          }
     }

     update() {}
}

方法二：每次绘制时实时计算坐标 #

如果担心图像尺寸可能变化，也可以在draw方法里每次检查图像状态，加载完成后再计算坐标：

class Game {
     constructor(gameWidth, gameHeight) {
          this.width = gameWidth;
          this.height = gameHeight;
          this.image = new Image();
          this.image.src = option.introImage;
          this.centerX = this.width / 2;
          this.centerY = this.height / 2;
     }

     draw(context) {
          if (this.image.complete) {
               const x = this.centerX - this.image.width * 0.5;
               const y = this.centerY - this.image.height * 0.5;
               context.drawImage(this.image, x, y);
          }
     }

     update() {}
}

额外提醒：检查你的SVG文件是否设置了正确的viewBox以及width、height属性，这会影响图像在Canvas中的渲染尺寸。

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