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

Question

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

我正在像这样设置转换

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

难道我做错了什么？

这是小提琴

Answer 1

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

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

所以在javascript中这样做：

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