Canvas缩放基点居中实现问题咨询

1. 可以将缩放基点设置为居中 #

Canvas 的变换基于坐标系原点，要实现以指定中心点缩放，只需通过坐标平移配合缩放操作即可：先把坐标系原点移到目标中心点，执行缩放后再移回原位置，后续绘制的所有图形都会以该中心点为基准缩放。

你的四个红色矩形的中心坐标是 (95, 95)（四个矩形分布在 75-125 的X/Y区间，中心为区间中点），修改后的代码如下：

var canvas = document.getElementById("target");
var ctx = canvas.getContext("2d");

// 绘制原始红色图形
ctx.fillStyle = "red";
ctx.fillRect(75,75,10,10);
ctx.fillRect(115,75,10,10);
ctx.fillRect(75,115,10,10);
ctx.fillRect(115,115,10,10);

setTimeout(() => {
  const scale = 2;
  const centerX = 95;
  const centerY = 95;

  // 调整坐标系实现中心缩放
  ctx.translate(centerX, centerY);
  ctx.scale(scale, scale);
  ctx.translate(-centerX, -centerY);

  ctx.fillStyle = 'blue';
  // 直接使用原始坐标绘制，无需手动调整比例
  ctx.fillRect(75,75,10,10);
  ctx.fillRect(115,75,10,10);
  ctx.fillRect(75,115,10,10);
  ctx.fillRect(115,115,10,10);
}, 2000);

2. 手动计算偏移量实现视觉居中 #

如果不想使用坐标系变换，可通过计算偏移量调整绘制坐标，让缩放后的图形视觉上居中。核心思路是让缩放后的图形中心与原始图形中心重合，通过坐标偏移抵消缩放带来的位移。

计算公式（X/Y轴通用）：
绘制坐标 = 原始坐标 - 中心点坐标 × (1 - 1/缩放比例)

代入你的场景（中心点95，缩放比例2），修改后的代码如下：

var canvas = document.getElementById("target");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(75,75,10,10);
ctx.fillRect(115,75,10,10);
ctx.fillRect(75,115,10,10);
ctx.fillRect(115,115,10,10);

setTimeout(() => {
  const scale = 2;
  const centerX = 95;
  const centerY = 95;

  ctx.scale(scale,scale);
  ctx.fillStyle = 'blue';

  // 计算偏移后的绘制坐标
  const calcDrawPos = (originalPos, center, scale) => {
    return originalPos - center * (1 - 1/scale);
  };

  ctx.fillRect(calcDrawPos(75, centerX, scale), calcDrawPos(75, centerY, scale), 10, 10);
  ctx.fillRect(calcDrawPos(115, centerX, scale), calcDrawPos(75, centerY, scale), 10, 10);
  ctx.fillRect(calcDrawPos(75, centerX, scale), calcDrawPos(115, centerY, scale), 10, 10);
  ctx.fillRect(calcDrawPos(115, centerX, scale), calcDrawPos(115, centerY, scale), 10, 10);
}, 2000);

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