如何在左下角设置html5画布的原点

Question

我想要像在经典（O，x，y）笛卡尔标志中那样将画布的原点设置在左下角。

Answer 1

变换canvas上下文相当于更改原点。

<canvas width="100" height="100" id="mycanvas"></canvas> 

<script> 
var c = document.getElementById('mycanvas'); 
var ctx = c.getContext('2d'); 

ctx.transform(-1, 0, 0, 1, 100, 0); 

ctx.beginPath(); 
ctx.moveTo(0, 0); 
ctx.lineTo(100,100); 
ctx.closePath(); 

ctx.lineWidth = 5; 
ctx.stroke(); 
</script> 

Demo。