将画布原点设置为左下角

Question

嘿，你们有没有办法将原点设置在画布的左下方？我尝试通过− 1进行缩放，但之后所有内容都颠倒过来。我需要做一些像坐标系统一样的东西，但只有正面部分（第一象限）。所以我需要它从左下角的0.0开始。

Answer 1

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

See a demo on JSFiddle.

Answer 2

有没有一种方法来设置原点到左下的画布？

不是你想要的样子，不是。你可以做的最好的是icktoofay说的。

也就是说，在一个系统和另一个系统之间进行转换并不难。例如：

// Given an X,Y in 1st quadrant cartesian coordinates give the corresponding screen coordinate 
function cartToScreen(px, py) { 
    return [px, -py + HEIGHT]; 
}; 

所以你会写：

var coords = cartToScreen(50,50); 
// draws 50 pixels from the bottoom instead of 50 pixels from the top 
ctx.fillText("lalala", coords[0], coords[1]); 

Example

在任何情况下，我强烈建议，如果你是在所有能够只是习惯屏坐标。如果您不需要考虑这个小小的差异，它可以为您节省大量的麻烦。