जवाबों:
canvas
डोम तत्व है .height
और .width
करने के लिए गुण है कि अनुरूप height="…"
और width="…"
विशेषताओं। अपने कैनवास का आकार बदलने के लिए उन्हें जावास्क्रिप्ट कोड में संख्यात्मक मान पर सेट करें। उदाहरण के लिए:
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;
ध्यान दें कि यह कैनवास को साफ करता है, हालांकि आपको ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height);
उन ब्राउज़रों को संभालने के लिए अनुसरण करना चाहिए जो कैनवास को पूरी तरह से साफ नहीं करते हैं। आपको आकार परिवर्तन के बाद आपके द्वारा प्रदर्शित किसी भी सामग्री को फिर से तैयार करना होगा।
आगे ध्यान दें कि ऊंचाई और चौड़ाई ड्राइंग के लिए उपयोग किए जाने वाले तार्किक कैनवास आयाम हैं और सीएसएस विशेषताओं से अलग हैं । यदि आप CSS विशेषताओं को सेट नहीं करते हैं, तो कैनवास के आंतरिक आकार को इसके प्रदर्शन आकार के रूप में उपयोग किया जाएगा; यदि आप CSS विशेषताओं को सेट करते हैं, और वे कैनवास आयामों से भिन्न होते हैं, तो आपकी सामग्री को ब्राउज़र में स्केल किया जाएगा। उदाहरण के लिए: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 द्वारा ज़ूम इन किया गया है।
एक कैनवास में 2 आकार होते हैं, कैनवास में पिक्सेल का आयाम (यह बैकिंगस्टोर या ड्रॉइंग बफ़र) और डिस्प्ले आकार होता है। पिक्सेल की संख्या कैनवास विशेषताओं का उपयोग करके सेट की गई है। HTML में
<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";
यकीनन एक कैनवास 1x1 पिक्सल बनाने का सबसे अच्छा तरीका है, ALWAYS USE CSS आकार का चयन करने के फिर उस आकार से मेल खाने वाले पिक्सेल की संख्या बनाने के लिए एक छोटा सा जावास्क्रिप्ट लिखें।
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;
}
यह सबसे अच्छा तरीका क्यों है? क्योंकि यह किसी भी कोड को बदलने के बिना ज्यादातर मामलों में काम करता है।
क्योंकि मैंने उन विशेषताओं को सेट नहीं किया था जो प्रत्येक नमूने में बदली सीएसएस है (जहाँ तक कैनवास का संबंध है)
टिप्पणियाँ:
आपका बहुत बहुत धन्यवाद! अंत में मैंने इस कोड के साथ धुंधली पिक्सेल समस्या को हल किया:
<canvas id="graph" width=326 height=240 style='width:326px;height:240px'></canvas>
'हाफ-पिक्सल' के जुड़ने के साथ ही यह अनब्लॉक लाइनों को ट्रिक करता है।
$('#mycanvas').attr({width:400,height:300}).css({width:'800px',height:'600px'});
यदि आप चाहते हैं कि दृश्य आकार पिक्सेल आकार के समान हो, तो कभी भी शैलियों को सेट न करें, केवल विशेषताएँ।