बहुत बड़ा एचटीएमएल 5 कैनवास सर्कल अपर्याप्त

Question

मैं एक ऐसा एप्लीकेशन विकसित कर रहा हूं जहां उपयोगकर्ता HTML5 कैनवास पर यूक्लिडियन निर्माण आकर्षित करते हैं। इस तरह मैं वास्तव में कुछ आकारों के आकार को सीमित नहीं कर सकता। स्क्रीन पर खींची जाने वाली बहुत बड़ी सर्किलों का अपहरण करते समय मैंने देखा कि बहुत बड़ी सर्किलों में निरंतर त्रिज्या नहीं है।

अधिक विशिष्ट होने के लिए, दो बिंदुओं द्वारा परिभाषित एक सर्कल, एक केंद्र बिंदु और त्रिज्या निर्दिष्ट करने वाला कोई त्रिज्या बिंदु से गुजरता नहीं है!

progressivly बड़ा हलकों। ये सभी ई

त्रुटि बिंदु के माध्यम से पारित करने के लिए 45 डिग्री = पीआई/4 के गुणकों पर occure नहीं करता अपेक्षा की जाती है।

http://jsfiddle.net/D28J2/2/

मेरे सवालों का:: क्यों इस occure करता है इन गुणकों के बीच त्रुटि यहाँ एक jsfiddle ऊपर पहला उदाहरण युक्त है सबसे बड़ी (पीआई/8 उदाहरण के लिए)

है? और क्या इस के आसपास काम करने के लिए कुछ प्रभावशाली तरीका है?

Answer 1

जिस तरह से मैंने इस मुद्दे के आसपास काम किया, वह पूरी तरह से बेजियर वक्र के साथ एक सर्कल ड्रॉ सन्निकटन के अपने कार्यान्वयन को रोल करता था। कार्यान्वयन का विवरण देने वाला एक लेख यहां http://www.tinaja.com/glib/ellipse4.pdf पाया जा सकता है।

function magic_circle(ctx, x, y, r){ 
    m = 0.551784 

    ctx.save() 
    ctx.translate(x, y) 
    ctx.scale(r, r) 

    ctx.beginPath() 
    ctx.moveTo(1, 0) 
    ctx.bezierCurveTo(1, -m, m, -1, 0, -1) 
    ctx.bezierCurveTo(-m, -1, -1, -m, -1, 0) 
    ctx.bezierCurveTo(-1, m, -m, 1, 0, 1) 
    ctx.bezierCurveTo(m, 1, 1, m, 1, 0) 
    ctx.closePath() 
    ctx.restore() 
} 

बस इन चार segements के साथ मैं काफी बेहतर तो गूगल क्रोम कैनवास कार्यान्वयन में निर्माण एक चक्र अनुमान लगाने के लिए सक्षम था।

Answer 2

Google क्रोम में मैं इस मुद्दे को दोहरा सकता हूं लेकिन आईई 9 और आईई 10 में सब ठीक है।

तो मेरा अनुमान है कि क्रोम में कार्यान्वयन गलत है। यह एक गोल करने वाली त्रुटि हो सकती है या उन्होंने पाप और कोस से बचने के लिए एक इंटरपोलेशन विधि का उपयोग किया जो बहुत सटीक नहीं है।

यहाँ देखो के रूप में अच्छी: HTML5 canvas arcs not rendering correctly in Google Chrome

केवल काम के आसपास मैं कल्पना कर सकते हैं अपने खुद के कोड से सर्कल ड्राइंग या एक (jQuery?) का उपयोग प्लग में है कि आप के लिए यह करता है।

Answer 3

यह शायद एक फ़्लोटिंग पॉइंट कटऑफ त्रुटि है। संभवतः क्योंकि साइन और कोसाइन पूरी तरह से सटीक मूल्य नहीं दे रहे हैं। चाप के बजाय कैनवास घूर्णन करके आप इसे चारों ओर (क्रोम में कम से कम) प्राप्त कर सकते हैं।

ctx.save();   // Save the canvas so we can rotate back. 
ctx.translate(x, y); // Translate to the origin point. 
ctx.rotate(alpha); // Rotate the proper angle. 

ctx.arc(0, 0, 3, 0, Math.PI*2); // Draw the small circle at the origin. 
ctx.fill(); 

ctx.arc(r, 0, r, 0, Math.PI*2); // Create a big with the origin 1 radius away. 
ctx.restore();     // Restore the canvas to the original orientation 
           // before drawing. Otherwise the circle looks bad. 
ctx.strokeStyle = "black"; 
ctx.stroke();     // Draw! 

मैं आकृतियों के बजाय कैनवास में हेरफेर करने का एक बड़ा प्रशंसक हूं। यह आपको काम करने के लिए एक और तार्किक क्षेत्र देता है। देखें http://jsfiddle.net/D28J2/10/

Answer 4

बस इसे बाहर फेंक दिया लेकिन क्या यह पीआई के पर्याप्त अंक निर्दिष्ट किए बिना एक मुद्दा हो सकता है? जब भी मैं ऐसी चीजें करता हूं, मैं थोड़ी अधिक मात्रा में जाता हूं और पीआई के लगभग 10 अंकों का उपयोग करता हूं।