Canvas缩放仅改变元素尺寸而非坐标系统的实现方法

你遇到的问题根源在于ctx.scale(x,y)默认是**基于画布原点(0,0)**执行缩放的，这会让你的图形坐标（比如startX、startY）也被同步缩放，导致图形看起来既放大又偏移了位置。要实现图形原地缩放，核心是让缩放围绕你想要固定的锚点（比如云的起始位置）进行，而非默认的原点。

Canvas的变换是顺序敏感的，我们可以通过「平移到锚点 → 缩放 → 平移回原位置」的三步操作，让图形以指定点为中心原地缩放，完全不需要手动修改路径坐标——这比遍历坐标调整的方案高效得多。

具体逻辑：

• 先调用ctx.translate(startX, startY)，把坐标系的原点临时移动到你想要固定的图形位置（比如云的起始点startX, startY）
• 然后执行ctx.scale(currentScale, currentScale)，此时缩放会围绕新的原点（也就是你的锚点）进行，不会偏移图形位置
• 最后调用ctx.translate(-startX, -startY)，把坐标系移回原来的原点，这样绘制图形时仍然可以使用原来的坐标值

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cH;
var cW;
cW = window.innerWidth;
cH = window.innerHeight;
c.width = cW * devicePixelRatio;
c.height = cH * devicePixelRatio;
ctx.scale(devicePixelRatio, devicePixelRatio);

var startX = 200;
var startY = 100;
var currentScale = 0.1;

function animateCloud () {
  // 关键：用变换组合实现原地缩放
  ctx.save(); // 保存当前变换状态，避免影响后续绘制
  ctx.translate(startX, startY); // 平移到锚点
  ctx.scale(currentScale, currentScale); // 围绕锚点缩放
  ctx.translate(-startX, -startY); // 平移回原坐标系

  // 绘制云形状（坐标完全不用修改）
  ctx.beginPath();
  ctx.moveTo(startX, startY);
  ctx.bezierCurveTo(startX - 40, startY + 10, startX - 20, startY + 180, startX + 60, startY + 70);
  ctx.bezierCurveTo(startX + 100, startY + 100, startX + 150, startY + 100, startX + 150, startY + 70);
  ctx.bezierCurveTo(startX + 280, startY + 70, startX + 230, startY + 40, startX + 210, startY + 20);
  ctx.bezierCurveTo(startX + 360, startY - 40, startX + 210, startY - 50, startX + 160, startY - 30);
  ctx.bezierCurveTo(startX + 150, startY - 75, startX + 80, startY - 60, startX + 70, startY - 30);
  ctx.bezierCurveTo(startX + 30, startY - 75, startX - 10, startY - 60, startX, startY);
  ctx.closePath();
  ctx.lineWidth = 5;
  ctx.strokeStyle = "#333";
  ctx.stroke();

  ctx.restore(); // 恢复变换状态，避免累积影响

  if (currentScale < 1 ){
    currentScale += 0.1;
    requestAnimationFrame(animateCloud);
  }
}
requestAnimationFrame(animateCloud);

canvas { 
  display: block; 
  width: 100vw; 
  height: 100vh; 
  cursor: pointer; 
}

<canvas id="c"></canvas>

• 我添加了ctx.save()和ctx.restore()，这两个方法能帮你安全管理Canvas的变换状态，避免每次动画的变换操作累积影响后续绘制（比手动调用setTransform更灵活）
• 如果想要围绕图形的中心缩放，只需要把锚点改成云的中心坐标即可（比如计算出云的中心x、y值，替换startX和startY）
• 你之前考虑的遍历路径坐标修改的方案确实不够高效，Canvas的变换矩阵是浏览器原生优化过的，不管是性能还是代码简洁性都远优于手动调整坐标

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