如何使用JavaScript实现HTML5 Canvas自定义图形的镜像并迁移至画布其他区域

嘿，我来帮你搞定这个Canvas镜像的问题！你当前代码的核心问题是找错了调用scale方法的对象——你的folds是自己定义的绘图函数，它根本没有scale这个方法，scale是属于Canvas绘图上下文（也就是你代码里的draw变量）的方法哦。

而且直接调用scale(-1,1)还会有个坑：Canvas的变换默认是以画布原点(0,0)为中心的，直接翻转的话，你的图形很可能会跑到画布外面，完全看不到。下面给你一个可行的解决方案：

正确的实现思路 #

Canvas的变换（平移、缩放、旋转）需要遵循「状态保存→变换→绘图→状态恢复」的流程，而且变换顺序很重要：

1. 先保存当前上下文的状态，避免后续绘图被当前变换影响
2. 使用translate把坐标系平移到你想要放置镜像图形的位置
3. 执行scale(-1,1)完成水平镜像（如果要垂直镜像就用scale(1,-1)）
4. 绘制你的自定义图形（注意此时坐标系已经变换，绘图坐标要相对平移后的原点）
5. 恢复上下文状态，回到变换前的状态

修正后的代码示例 #

// 你的原绘图函数保持不变
function folds(x, y ,z){
 draw.beginPath();
 draw.arc(x, y, z, 5.25, 2 * Math.PI);
 draw.closePath();
 draw.lineWidth = 7;
 draw.strokeStyle = "black";
 draw.stroke();
}

// 新增绘制镜像图形的函数
function drawMirroredFolds(targetX, targetY, radius) {
  // 保存当前上下文状态（比如当前的变换、样式等）
  draw.save();
  
  // 平移坐标系到目标位置的中心
  draw.translate(targetX, targetY);
  // 执行水平镜像（x轴方向翻转）
  draw.scale(-1, 1);
  // 因为已经平移+镜像，所以以(0,0)为中心绘制图形，最终会出现在targetX的位置
  folds(0, 0, radius);
  
  // 恢复上下文状态，不影响后续其他绘图操作
  draw.restore();
}

// 调用示例：先画原图形，再画镜像后的图形
// 原图形在(150, 150)，半径60
folds(150, 150, 60);
// 镜像后的图形放到(450, 150)
drawMirroredFolds(450, 150, 60);

关键细节说明 #

• 为什么要用save()和restore()？这两个方法可以帮你隔离每次变换的影响，不然后续的绘图都会沿用当前的变换规则，容易出现混乱。
• 为什么要先translate再scale？如果直接scale(-1,1)，图形会以(0,0)为中心翻转，大概率会跑到画布左侧外面，看不到。先平移到目标位置，再翻转，就能让图形正好出现在你想要的区域。

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