在HTML5画布中，我可以让y轴向上而不是向下吗？
在HTML5画布中，我可以让y轴向上而不是向下吗？
提问于 2010-12-02 21:16:47
我在画布上画了一张图，并与y轴“向后”的事实作了斗争。原点在左上角，递增的值向下而不是向上。
(0,0) (x,0) (0,y) ^
+--------------> |
| |
| CANVAS | INSTEAD
| DOES THIS | OF THIS
| |
| +----------------->
(0,y) v (0,0) (x,0) 我知道我可以使用translate()将原点移动到左下角。
context.translate(0, canvas.height);我知道我可以使用scale()来反转y轴。
context.scale(1, -1);这似乎是可行的，除了它会导致文本颠倒显示。有没有办法让Canvas的坐标像我期望的那样工作？
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-11-03 20:53:31
对于更现代的设置，您可以使用context.transform(1, 0, 0, -1, 0, canvas.height)。这会翻转y轴，并将整个画布移动一个屏幕。
有关可用转换的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
Stack Overflow用户
发布于 2010-12-02 21:19:45
我认为你会做得更好，只是习惯它。原点位于左上角，大多数基于像素的视频/屏幕API。
Stack Overflow用户
发布于 2014-01-27 15:24:19
绘制graph_height - y。
<canvas></canvas>
<script>
var e = document.getElementsByTagName('canvas')[0];
var c = e.getContext('2d');
function plot(x,y) {
c.fillRect(x, e.height-y, 5, 5);
}
plot(100,50);
plot(200,100);
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4335400
复制相关文章
相似问题
腾讯云开发者
