前端求助：如何优雅的让 canvas 的原点 (0, 0) 从左下角开始？

[cat]

众所周知，在网页中 0,0 一般是在页面左上角，向右向下延申（此处暂不考虑 RTL 情况）

现在要绘制一些图形，甲方给的数据中 0,0 是在左下角，也就是说 Y 轴的起点是在底部

目前的做法是把所有的 Y 坐标反正为负数，视觉上就反过来了，但后续的许多处理都特别麻烦

突然想到那些图表组件，例如散点图折线图，它们的 Y 轴起点一般也在底部

想请教各位大佬，这部分有什么比较优雅的处理方式吗

感谢！

[cheese]

没啥好办法，要么你就劫持原生方法，直接输入甲方的坐标，然后计算成左上角为原点的，再输入 canvas 绘图

[KouShuiYu]

试试 css

transform: rotateX(180deg);

[Mutoo]

用 webgl 绘制，它的坐标系统就是 y 向上的。或者在你的 canvas 2d 绘制系统抽象一个摄像机空间，然后所有的绘制操作都通过这个相机做一个坐标系变换。

[levima]

赞同 2 楼的 CSS 方案