दिलचस्प पोस्ट
डायरेक्टरी रिक्त है या नहीं यह जांचने के लिए PHP का उपयोग कैसे किया जा सकता है? यूनिट टेस्टिंग: डेटटाइम.अब SQLite: मैं एक क्वेरी का परिणाम CSV फ़ाइल के रूप में कैसे बचा सकता हूं? जावास्क्रिप्ट टू फिक्स्ड न राउंडिंग इनपुट प्रकार = फाइल केवल बटन दिखाएँ Xpath के साथ एक सीएसएस वर्ग का चयन करना SQL सर्वर "टेक्स्ट" डेटा प्रकार पर WHERE खंड सरल खोजकर्ता ऐडैप्टर और कंसल लोडर के लिए विस्तार योग्य LISTView पायथन में `स्वयं 'ऑब्जेक्ट क्यों हैं? डाक से res.redirect एंड्रॉइड से बहुपक्षीय एंटिटी का उपयोग करके सर्वर पर कई छवियां कैसे भेजें यह क्या होता है "(फ़ंक्शन () {});", ब्रैकेट के अंदर फ़ंक्शन, जावास्क्रिप्ट में क्या मतलब है? जावा का कलेक्शन। शफ़ल क्या कर रहा है? सीएसएस का इस्तेमाल करते हुए ऐप्पल जैसी स्क्रॉलबार जैक्सन और सामान्य प्रकार संदर्भ

HTML5 में कैनवास की चौड़ाई और ऊंचाई

क्या HTML5 canvas तत्व की चौड़ाई और ऊंचाई तय करना संभव है?

सामान्य तरीका निम्न है:

 <canvas id="canvas" width="300" height="300"></canvas> 

वेब के समाधान से एकत्रित समाधान "HTML5 में कैनवास की चौड़ाई और ऊंचाई"

canvas डोम तत्व है। .height और। .width गुण जो कि height="…" और width="…" विशेषताओं के अनुरूप है अपने कैनवास का आकार बदलने के लिए उन्हें JavaScript कोड में संख्यात्मक मानों पर सेट करें उदाहरण के लिए:

 var canvas = document.getElementsByTagName('canvas')[0]; canvas.width = 800; canvas.height = 600; 

ध्यान दें कि यह कैनवास साफ़ करता है, हालांकि आपको ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); साथ पालन करना चाहिए ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height); उन ब्राउज़रों को संभालने के लिए जो पूरी तरह से कैनवास साफ़ नहीं करते हैं आपको आकार परिवर्तन के बाद प्रदर्शित किसी भी सामग्री को फिर से तैयार करना होगा।

नोट करें कि ऊँचाई और चौड़ाई ड्राइंग के लिए उपयोग किए जाने वाले तार्किक कैनवास आयाम हैं और style.width से अलग हैं। style.height और style.width सीएसएस विशेषताएँ यदि आप सीएसएस विशेषताओं को सेट नहीं करते हैं, तो कैनवास का आंतरिक आकार इसके प्रदर्शन आकार के रूप में उपयोग किया जाएगा; यदि आप सीएसएस गुण सेट करते हैं, और वे कैनवास आयामों से भिन्न होते हैं, तो आपकी सामग्री को ब्राउज़र में बढ़ाया जाएगा। उदाहरण के लिए:

 // Make a canvas that has a blurry pixelated zoom-in // with each canvas pixel drawn showing as roughly 2x2 on screen canvas.width = 400; canvas.height = 300; canvas.style.width = '800px'; canvas.style.height = '600px'; 

कैनवास का यह लाइव उदाहरण देखें जो कि 4x तक ज़ूम इन किया गया है।

 var c = document.getElementsByTagName('canvas')[0]; var ctx = c.getContext('2d'); ctx.lineWidth = 1; ctx.strokeStyle = '#f00'; ctx.fillStyle = '#eff'; ctx.fillRect( 10.5, 10.5, 20, 20 ); ctx.strokeRect( 10.5, 10.5, 20, 20 ); ctx.fillRect( 40, 10.5, 20, 20 ); ctx.strokeRect( 40, 10.5, 20, 20 ); ctx.fillRect( 70, 10, 20, 20 ); ctx.strokeRect( 70, 10, 20, 20 ); ctx.strokeStyle = '#fff'; ctx.strokeRect( 10.5, 10.5, 20, 20 ); ctx.strokeRect( 40, 10.5, 20, 20 ); ctx.strokeRect( 70, 10, 20, 20 ); 
 body { background:#eee; margin:1em; text-align:center } canvas { background:#fff; border:1px solid #ccc; width:400px; height:160px } 
 <canvas width="100" height="40"></canvas> <p>Showing that re-drawing the same antialiased lines does not obliterate old antialiased lines.</p> 

आपका बहुत बहुत धन्यवाद! अंत में मैंने इस कोड के साथ धुंधला पिक्सल समस्या हल की:

<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>

प्लस 'आधा पिक्सेल' चाल अनब्ल्राम लाइनों के लिए

एक कैनवास के 2 आकार हैं, कैनवास में पिक्सेल का आयाम (यह बैकिंगस्टोर या ड्राइंगबफर है) और प्रदर्शन आकार कैनवास गुणों का उपयोग करके पिक्सेल की संख्या निर्धारित की गई है एचटीएमएल में

 <canvas width="400" height="300"></canvas> 

या जावास्क्रिप्ट में

 someCanvasElement.width = 400; someCanvasElement.height = 300; 

उस से अलग कैनवास की सीएसएस स्टाइल की चौड़ाई और ऊंचाई है

सीएसएस में

 canvas { /* or some other selector */ width: 500px; height: 400px; } 

या जावास्क्रिप्ट में

 canvas.style.width = "500px"; canvas.style.height = "400px"; 

एक कैनवास 1×1 पिक्सल बनाने का यकीनन सबसे अच्छा तरीका है कि आकार का चयन करने के लिए हमेशा सीएसएस का प्रयोग करें और उस आकार से पिक्सल की संख्या को बनाने के लिए जावास्क्रिप्ट का एक छोटा सा बिट लिखें।

 function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 

यह सबसे अच्छा तरीका क्यों है? क्योंकि यह किसी भी कोड को बदलने के बिना ज्यादातर मामलों में काम करता है

यहां एक पूर्ण विंडो कैनवास है:

 const ctx = document.querySelector("#c").getContext("2d"); function render(time) { time *= 0.001; resizeCanvasToDisplaySize(ctx.canvas); ctx.fillStyle = "#DDE"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.save(); const spacing = 64; const size = 48; const across = ctx.canvas.width / spacing + 1; const down = ctx.canvas.height / spacing + 1; const s = Math.sin(time); const c = Math.cos(time); for (let y = 0; y < down; ++y) { for (let x = 0; x < across; ++x) { ctx.setTransform(c, -s, s, c, x * spacing, y * spacing); ctx.strokeRect(-size / 2, -size / 2, size, size); } } ctx.restore(); requestAnimationFrame(render); } requestAnimationFrame(render); function resizeCanvasToDisplaySize(canvas) { // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // If it's resolution does not match change it if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; return true; } return false; } 
 body { margin: 0; } canvas { display: block; width: 100vw; height: 100vh; } 
 <canvas id="c"></canvas>