एचटीएमएल 5 कैनवास में, क्या मैं वाई अक्ष को नीचे की बजाय ऊपर कर सकता हूं?

Question

मैं कैनवास में एक ग्राफ खींच रहा हूं और इस तथ्य से संघर्ष कर रहा हूं कि वाई-अक्ष "पिछड़ा" है। मूल शीर्ष बाएं कोने में है, और बढ़ते मूल्यों की बजाय नीचे जाना है।

(0,0)   (x,0)  (0,y)^
     +-------------->    | 
     |       | 
     | CANVAS     |  INSTEAD 
     | DOES THIS    |  OF THIS 
     |       | 
     |       +-----------------> 
(0,y) v      (0,0)    (x,0) 

मुझे पता है कि मैं अनुवाद() का उपयोग करके मूल को नीचे-बाएं कोने में ले जा सकता हूं।

context.translate(0, canvas.height); 

और मुझे पता है कि मैं स्केल() का उपयोग करके वाई-अक्ष को उलटा कर सकता हूं।

context.scale(1, -1); 

ऐसा लगता है कि यह टेक्स्ट को ऊपर-नीचे दिखाई देता है। क्या कैनवास के निर्देशांक मुझे जिस तरह से उम्मीद करते हैं, काम करने का कोई तरीका है?

Answer 1

अधिक आधुनिक सेटअप के लिए, आप context.transform(1, 0, 0, -1, 0, canvas.height) उपयोग कर सकते हैं। यह वाई धुरी flips और पूरे कैनवास एक स्क्रीनफुल चालित करता है।

अधिक उपलब्ध परिवर्तनों पर: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform

Answer 2

मुझे लगता है कि आप इसका उपयोग करने के लिए बहुत बेहतर करेंगे। अधिकांश पिक्सेल-आधारित वीडियो/स्क्रीन एपीआई के साथ मूल शीर्ष बाईं ओर है।

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 मैं सिर्फ यह कोशिश की डाल पर निर्भर करता है और यह पहली बार में काम नहीं किया। आपको move के बीच .scale डालना होगा();

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