在html画布上反转和居中原点

Question

我已将原点反转并居中在画布上，但y轴似乎不像我的x轴那样缩放。

我正在设置变换

context.setTransform(1, 0, 0, -1, (canvas.width/2), (canvas.height/2));

我做错了吗？

这是fiddle

Answer 1

不使用CSS重新设置画布宽度和高度，而是直接在canvas元素上重置。

默认画布大小为300x150，因此当CSS样式为400x400时，实际上是在拉伸画布高度。

所以在javascript中这样做：

canvas.width=400;
canvas.height=400;