HTML5 Canvasでは、y軸を下ろすのではなく上にすることはできますか？

Question

私はキャンバスでグラフを描いており、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); 

これは、テキストが逆さまに表示されることを除いて、動作するようです。キャンバスの座標を私の予想どおりに動作させる方法はありますか？

Answer 1

より近代的なセットアップのために、あなたはcontext.transform(1, 0, 0, -1, 0, canvas.height)を使用することができます。これはy軸を反転させ、キャンバス全体を1画面分移動させます。利用可能な変換の

より： ​​

Answer 2

私はあなたがそれに慣れるのにはるかに良いと思います。原点は左上にあり、ほとんどのピクセルベースのビデオ/スクリーンAPIがあります。

Here's a discussion on the subject。

Answer 3

プロットgraph_height - y。

例：http://jsfiddle.net/nVUUM/

<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> 

Answer 4

それはあなたが私はこれを試み、それが最初では動作しませんでした.scaleを置く場所によって異なります。あなたはmoveTo（）の間に.scaleを置く必要があります。どこ `下> top`バウンディングボックスを持っているものの

ctx.arc(50,50,50,0,2*Math.PI); ctx.moveTo(50,50); ctx.scale(1,-1); ctx.lineTo(50,100); ctx.stroke();