नोट : इसका मतलब यह है कि जब मौजूदा कैनवास तत्व को स्केल किया जाता है ,तो कैनवास की सतह पर लाइनों या ग्राफिक्स को कैसे प्रस्तुत किया जाता है ,इसके साथ नहीं । दूसरे शब्दों में, इसमें स्केल किए गए तत्वों के प्रक्षेप केसाथ सब कुछ है, औरएक कैनवास पर ग्राफिक्स के एंटीएलियासिंग केसाथ कुछ नहीं करना है। मैं इस बात से चिंतित नहीं हूँ कि ब्राउज़र कैसे रेखाएँ खींचता है; मुझे इस बात की परवाह है कि जब ब्राउज़रको स्केल किया जाता है तोब्राउज़र अपने आप को कैसे प्रस्तुत करताहै।
क्या कोई कैनवास संपत्ति या ब्राउज़र सेटिंग है जो मैं स्केलिंग <canvas>तत्वों को प्रक्षेपित करने के लिए प्रोग्रामेटिक रूप से बदल सकता हूं ? एक क्रॉस-ब्राउज़र समाधान आदर्श है लेकिन आवश्यक नहीं है; वेबकिट-आधारित ब्राउज़र मेरा मुख्य लक्ष्य हैं। प्रदर्शन बहुत महत्वपूर्ण है।
यह सवाल सबसे समान है लेकिन समस्या को पर्याप्त रूप से नहीं बताता है। इसके लायक क्या है, मैंने कोशिश की हैimage-rendering: -webkit-optimize-contrast कोई फायदा नहीं उठाया।
आवेदन HTML5 + JS में लिखा गया "रेट्रो" 8-बिट स्टाइल वाला गेम होगा, यह स्पष्ट करने के लिए कि मुझे क्या चाहिए।
उदाहरण के लिए, यहाँ एक उदाहरण है। ( लाइव संस्करण )
मान लीजिए मेरे पास एक 21x21 कैनवास है ...
<canvas id='b' width='21' height='21'></canvas>... जो सीएसएस है जो तत्व को 5 गुना बड़ा (105x105) बनाता है:
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */मैं कैनवास पर एक सरल 'X' आकर्षित करता हूं जैसे:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});बाईं ओर की छवि क्रोमियम (14.0) प्रस्तुत करती है। दाईं ओर की छवि वह है जो मैं चाहता हूं (उदाहरण के लिए हाथ खींचा गया)।
