Canvas 2D创建Button类时多按钮居中偏移问题求助

核心问题原因 #

Canvas的translate()是累积式变换——每次调用都会在当前画布坐标系的基础上叠加平移。如果绘制多个按钮时没有保存和恢复画布状态，后续按钮的translate会基于前一次的变换结果计算，导致坐标偏移。

解决方案：绘制按钮前后保存/恢复画布状态 #

在绘制每个按钮的流程中，用ctx.save()保存当前画布状态，绘制完成后用ctx.restore()恢复，确保每个按钮的translate都是基于初始坐标系计算的。

修正后的Button类示例 #

class Button {
  constructor(centerX, centerY, width, height, text) {
    this.centerX = centerX; // 直接传入中心点坐标，比如500/2=250
    this.centerY = centerY;
    this.width = width;
    this.height = height;
    this.text = text;
  }

  draw(ctx) {
    // 保存当前画布状态（包括坐标系、样式等）
    ctx.save();

    // 平移到按钮中心点，此时画布原点临时移到按钮中心
    ctx.translate(this.centerX, this.centerY);

    // 绘制按钮矩形：以临时原点(0,0)为中心，左上角坐标为(-宽/2, -高/2)
    ctx.fillStyle = '#e0e0e0';
    ctx.fillRect(-this.width/2, -this.height/2, this.width, this.height);
    ctx.strokeStyle = '#333';
    ctx.strokeRect(-this.width/2, -this.height/2, this.width, this.height);

    // 绘制按钮文字：居中对齐临时原点(0,0)
    ctx.fillStyle = '#333';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = '16px Arial';
    ctx.fillText(this.text, 0, 0);

    // 恢复画布到初始状态，避免影响后续元素绘制
    ctx.restore();
  }
}

// 调用示例
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;

// 所有按钮都以(250, ...)作为x中心点，实现水平居中
const startBtn = new Button(250, 180, 140, 50, '开始游戏');
const settingsBtn = new Button(250, 260, 140, 50, '游戏设置');
const quitBtn = new Button(250, 340, 140, 50, '退出游戏');

startBtn.draw(ctx);
settingsBtn.draw(ctx);
quitBtn.draw(ctx);

关键说明 #

• 传入按钮的centerX直接设为500/2即可实现水平居中，无需额外计算偏移
• save()和restore()是关键：它们会保存/恢复画布的所有状态（坐标系、填充/描边样式、字体等），确保每个按钮的绘制都是独立的，不会相互干扰

内容的提问来源于stack exchange，提问作者Me'Ms