Imposta l'origine della tela nell'angolo in basso a sinistra

Question

Hey ragazzi c'è un modo per impostare l'origine in basso a sinistra della tela? Ho provato il ridimensionamento di − 1 ma dopo tutto è capovolto. Devo creare qualcosa come un sistema di coordinate ma solo con la parte positiva (primo quadrante). Quindi ho bisogno di iniziare con 0.0 in basso a sinistra.

Answer 1

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

See a demo on JSFiddle.

Answer 2

c'è un modo per impostare l'origine in basso a sinistra della tela?

Non proprio come vorresti, no. Il meglio che puoi fare è quello che ha detto icktoofay.

Detto questo, non è troppo difficile fare una funzione per la conversione tra un sistema e l'altro. Per esempio:

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

Quindi devi scrivere:

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

In ogni caso, mi piacerebbe consigliamo vivamente che se siete a tutti in grado di solo abituarsi a schermo coordinate. In futuro, se non dovessi sempre tenere conto di questa piccola differenza, ti risparmierà un sacco di mal di testa.