Canvas 坐标系变换

PDF的坐标系原点是在页面的左下角

• 从左至右为X轴的正方向
• 从下至上为Y轴的正方向

HTML Canvas 与 OFD的坐标原点是在左上角

• 从左至右为X轴的正方向
• 从上至下为Y轴的正方向

为了便于这里介绍如何从左上角坐标通过坐标变换到左下角坐标

这里列出两种变换方式:

方式1

1. 将坐标上下翻转。
2. 平移坐标到页面的左下角位置，也就是负的页面高度。

ctx.scale(1, -1);
ctx.translate(0, -height);

方式 2

1. 旋转坐标180°
2. 坐标翻转坐标系。
3. 平移到左下角，也就是负的高度。

ctx.rotate(Math.PI)
ctx.scale(-1, 1);
ctx.translate(0,-height);