Canvas 设置图片进行 X 轴或(和) Y 轴的翻转

### 使用 HTML5 Canvas 实现图像的水平或垂直翻转 为了实现在Canvas上绘制并翻转一张图片，可以创建一个`<canvas>`元素，并利用JavaScript操作该画布。下面展示了一个具体的例子，其中包含了如何加载一幅图像到Canvas以及怎样对其进行水平和垂直方向上的翻转。 #### 创建可绘图的图像对象与Canvas环境设置 ```javascript // 创建一个新的canvas元素用于绘制处理后的图像 let dImage = document.createElement("canvas"); let ctx = dImage.getContext('2d'); // 获取2D渲染上下文以便于后续的操作 ``` #### 加载外部图片资源至内存中准备绘制 ```javascript let img = new Image(); // 初始化新的image实例 img.src = 'path_to_your_image.jpg'; // 设置目标图片路径 img.onload = function() { let width = this.width; let height = this.height; dImage.width = width; // 将canvas宽度设为原图大小 dImage.height = height; // 同样调整高度 // 接下来执行实际的翻转变换... } ``` #### 执行水平翻转 当希望得到一张关于Y轴对称的镜像时，可以在绘制之前先应用变换矩阵改变坐标系的方向： ```javascript ctx.save(); ctx.translate(width, 0); ctx.scale(-1, 1); // 反向缩放X轴达到水平反转的效果 ctx.drawImage(img, 0, 0); ctx.restore(); ``` 此段代码会保存当前状态(`save`)，接着移动原点到右边界(`translate`)，再通过负数比例因子沿X轴反向拉伸(`scale`)完成水平反射，最后恢复原始的状态(`restore`)以防止影响其他图形绘制[^1]。 #### 进行垂直翻转 对于想要获得相对于X轴对称的结果，则只需稍微修改上述参数即可实现垂直方向上的翻转: ```javascript ctx.save(); ctx.translate(0, height); ctx.scale(1, -1); // 此处改为仅沿Y轴进行反向缩放 ctx.drawImage(img, 0, 0); ctx.restore(); ``` 这段脚本同样遵循了相同的模式——它改变了坐标的起点位置并通过适当的比例变化实现了预期中的视觉效果[^3]。 以上就是基于HTML5 Canvas API来达成图像水平或垂直翻转的方法概述。值得注意的是，在某些应用场景下可能更倾向于采用CSS来进行简单的页面内元素转换；然而，如果涉及到进一步的数据处理或是需要导出经过编辑的内容作为Base64编码字符串等情况，则推荐使用Canvas解决方案[^2]。