कैनवास ड्राइंग और रेटिना डिस्प्ले: करने योग्य?

कैनवास के साथ ड्राइंग ड्राइंग फोन गैप के साथ काम करना। हम जिस पकड़ में भाग चुके हैं वह यह है कि कैनवास विशिष्ट पिक्सेल आयामों की अपेक्षा करता है। यह ठीक है सिवाय इसके कि एक सीएसएस/वेबकिट पीओवी से आईफोन 4 का रेटिना डिस्प्ले अभी भी 320px चौड़ा है, भले ही तकनीकी रूप से 640 वास्तविक स्क्रीन पिक्सेल हैं।कैनवास ड्राइंग और रेटिना डिस्प्ले: करने योग्य?

क्या गैर-रेटिना डिस्प्ले के साथ संगतता को संरक्षित करते हुए वेबकिट पर कैनवास का उपयोग करके रेटिना डिस्प्ले को समायोजित करने के लिए वैसे भी है?

स्रोत

2011-01-18 DA.

एक ड्रॉप में समाधान के लिए मेरा उत्तर देखें ... http://stackoverflow.com/a/19546481/555384 – jondavidjohn

मैं एक ही समस्या पिछले सप्ताह के साथ बैठ गया और यह कैसे हल करने के लिए की खोज की -

var canvas = document.querySelector('canvas'); 
var ctx = canvas.getContext('2d'); 

if (window.devicePixelRatio > 1) { 
    var canvasWidth = canvas.width; 
    var canvasHeight = canvas.height; 

    canvas.width = canvasWidth * window.devicePixelRatio; 
    canvas.height = canvasHeight * window.devicePixelRatio; 
    canvas.style.width = canvasWidth; 
    canvas.style.height = canvasHeight; 

    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
}

Full code on gist, demo on jsfiddle

स्रोत

2011-03-15 02:37:28

एक बहुत बेकार 'धन्यवाद!' मैं जल्द ही इसे आजमाने की उम्मीद करता हूं। –

क्या आप इस साइट को कहीं मिरर कर सकते हैं? वह लिंक टूटा हुआ है। –

कृपया समाधान को हमेशा स्टैक ओवरफ्लो पर कॉपी और पेस्ट करें, इसलिए यह ऑफ़लाइन होने पर भी उपलब्ध रहता है। – kritzikratzi

WebCode (http://www.webcodeapp.com) आप के लिए जावास्क्रिप्ट HTML5 कैनवास कोड उत्पन्न करता है एक वेक्टर ड्राइंग अनुप्रयोग है । कोड रेटिना-संगत है, आप यह देख सकते हैं कि वे इसे कैसे करते हैं।

स्रोत

2013-06-06 09:58:33 atreidp

यह मुझे http://code.google.com/p/canvg/ की याद दिलाता है। ध्यान दें कि यह रेटिना को कैसे संभालता है। –

एक ड्रॉप-इन पॉलीफिल है जो आपके लिए सबसे बुनियादी ड्राइंग ऑपरेशंस का ख्याल रखेगा, और उन ब्राउज़रों के बीच अस्पष्टता को हटा देगा जो स्वचालित रूप से आपके लिए (सफारी) और अन्य नहीं हैं।

https://github.com/jondavidjohn/hidpi-canvas-polyfill

आप बस अपने ड्राइंग कोड के पहले शामिल करें और यह आपको सभ्य रेटिना समर्थन स्वचालित रूप से देना चाहिए।

स्रोत

2013-10-23 15:51:02 jondavidjohn

यह पॉलीफिल मेरे कैनवास को अजीब तरह से बढ़ता है, हर बार जब मैं अपने कैनवास पर आकर्षित करता हूं तब तक यह सफारी में अपने टैब को लगभग क्रैश करता है। मुझे लगता है कि मैं इसे मैन्युअल रूप से करने की कोशिश करूंगा। –

@ जेरेडअपडाइक एक विस्तृत उदाहरण के साथ एक जिथब मुद्दे के माध्यम से रिपोर्टिंग के लिए एक महान उम्मीदवार की तरह लगता है ताकि यह दूसरों के लिए तय हो सके। – jondavidjohn

संपादित करें: बस ध्यान दिया कि मैंने डेमो के लिए गलत लिंक पोस्ट किया है!

रेटिना (या अन्य एचडीपीआई डिस्प्ले) कैनवास संकल्प निश्चित रूप से संभव है।

http://spencer-evans.com/share/github/canvas-resizer/

मैं भी इस कई बार से टकरा गया है: वहाँ एक काम यहाँ उदाहरण है। स्वीकृत उत्तर कोड अनिवार्य रूप से सही है, लेकिन आप लाइब्रेरी समाधान का भी उपयोग कर सकते हैं। मैंने तत्व को अधिक उत्तरदायी और उच्च रिज़ॉल्यूशन (जैसा कि डेमो में दिखाया गया है) बनाने के लिए बुद्धिमान कैनवास पुन: आकार को संभालने के लिए एक को मार डाला।

https://github.com/swevans/canvas-resizer

स्रोत

2015-11-06 02:34:02