如何使用Canvas在绘制的圆形内部居中放置并适配图片

你代码中drawImage的参数配置错误，存在两个核心问题：

• 绘制起点设为了(0,0)，没有对齐圆形的中心位置
• 绘制尺寸设为了250×320，远大于圆形140px（半径70）的直径，导致最终只显示了头像的左上角局部区域

将原代码中绘制头像的行：

context.drawImage(avatar, 0, 0, 250, 320);

替换为以下代码即可：

// 圆形直径等于头像需要适配的尺寸
const avatarSize = 70 * 2;
// 计算头像绘制的左上角坐标，让头像中心和圆形中心完全重合
const avatarDrawX = canvas.width / 2 - 70;
const avatarDrawY = canvas.height / 2 - 70;
context.drawImage(avatar, avatarDrawX, avatarDrawY, avatarSize, avatarSize);

如果需要适配非正方形的头像，避免拉伸变形，可以补充按比例裁剪的逻辑：

const avatarSize = 70 * 2;
// 计算头像裁剪偏移，取短边居中裁剪
const clipOffset = Math.abs(avatar.width - avatar.height) / 2;
const clipSize = Math.min(avatar.width, avatar.height);
context.drawImage(
  avatar,
  avatar.width > avatar.height ? clipOffset : 0,
  avatar.height > avatar.width ? clipOffset : 0,
  clipSize,
  clipSize,
  canvas.width / 2 - 70,
  canvas.height / 2 - 70,
  avatarSize,
  avatarSize
);

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