Canvas默认坐标系原点在左上角，y向下递增；印刷坐标系原点在左下角，y向上递增，需通过setTransform(1,0,0,-1,0,height)实现y轴翻转与原点迁移以适配打印。
Canvas 默认坐标系原点在左上角，x 向右递增、y 向下递增，而传统印刷排版（如PDF、胶片输出）常以左下角为原点、y 向上递增。要让 Canvas 绘制内容在打印时呈现正确镜像（例如文字不反、图形朝向匹配物理纸张方向），需对 y 轴做翻转，并配合平移调整原点位置。
理解 Canvas 与印刷坐标的差异
Canvas 的 (0, 0) 在画布左上角；标准印刷坐标系（如 PostScript、PDF）的 (0, 0) 通常在页面左下角，y 值向上增长。若直接绘制，文本和图形会“上下颠倒”——比如 drawText("A", 10, 20) 在 Canvas 中出现在顶部附近，但在印刷坐标中应靠近底部。镜像绘图不是简单左右翻转，而是 y 轴反转 + 原点重定位。
用 transform 实现 y 轴镜像与原点迁移
通过 ctx.setTransform() 或 ctx.transform() 可一次性设置仿射变换矩阵。假设画布高度为 height，目标是将 Canvas 坐标映射到“印刷坐标”：y = 0 对应物理纸张底部，y = height 对应顶部。
- 先垂直翻转：缩放 y 轴为 -1
- 再平移：把原点从左上角移到左下角，即沿 y 方向平移 height
- 最终变换矩阵为：[1, 0, 0, -1, 0, height]
代码示例：
const ctx = canvas.getContext('2d');
const height = canvas.height;
// 重置并应用镜像变换
ctx.setTransform(1, 0, 0, -1, 0, height);
// 此时 (10, 20) 表示距左边界10px、距底边20px的位置
ctx.font = '16px sans-serif';
ctx.fillText('Hello', 10, 20); // 文字正向显示，贴近纸张底部
打印前还原默认坐标系（避免干扰）
Canvas 变换是累积的。若仅对打印内容做镜像，应在绘制前保存状态、绘制后恢复，尤其当页面含其他非打印图形时：
- 调用 ctx.save() 保存当前变换
- 应用镜像变换（setTransform 或 scale(1,-1) + translate(0,-height)）
- 绘制专用于打印的内容
- 调用 ctx.restore() 恢复原始坐标系
注意：使用 scale(1, -1) 后，y 方向翻转，但原点仍在左上角，所以必须补 translate(0, -height) 才能把 (0,0) 移到左下角。
适配实际打印尺寸与DPI偏移
浏览器打印时 Canvas 渲ndered 内容可能被缩放（如 CSS px ≠ 打印点）。建议：
- 用 window.matchMedia('print').matches 检测是否处于打印预览模式
- 根据目标打印 DPI 动态设置 canvas.width/height（例如 300 DPI × A4 宽度 ≈ 2480px）
- 绘制前用 ctx.scale(scaleX, scaleY) 补偿设备像素比（devicePixelRatio）
- 文字渲染注意：翻转后 fontBaseline 默认仍为 "alphabetic"，可设为 "bottom" 配合镜像 y 坐标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
