HTML5 कैनवास 100% व्यूपोर्ट की ऊँचाई ऊँचाई?

Question

मैं एक कैनवास तत्व बनाने की कोशिश कर रहा हूं जो व्यूपोर्ट की चौड़ाई और ऊंचाई का 100% लेता है।

आप यहां मेरे उदाहरण में देख सकते हैं कि यह हो रहा है, हालांकि यह क्रोम और फायरफॉक्स दोनों में स्क्रॉल बार जोड़ रहा है। मैं अतिरिक्त स्क्रॉल पट्टियों को कैसे रोक सकता हूं और कैनवास के आकार के समान विंडो की चौड़ाई और ऊंचाई प्रदान कर सकता हूं?

Comments

इसे भी देखें: stackoverflow.com/questions/4037212

— hippietrail

याद दिलाता है एक मनोरंजक मनोरंजक Fonejacker कॉमेडी स्केच: youtu.be/6oj_oLMD688?t=22s

— फ्रांसिस बूथ

Answer 1

कैनवास को पूर्ण स्क्रीन की चौड़ाई और ऊंचाई पर हमेशा बनाने के लिए, यहां तक ​​कि जब ब्राउज़र का आकार बदल जाता है, तो आपको एक फ़ंक्शन के भीतर अपना ड्रॉ लूप चलाने की आवश्यकता होती है, जो कैनवास को window.innerHeight और window.innerWidth के आकार का बनाता है।

उदाहरण: http://jsfiddle.net/jaredwilli/qFuDr/

एचटीएमएल

<canvas id="canvas"></canvas>

जावास्क्रिप्ट

(function() {
    var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /**
             * Your drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

सीएसएस

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

यह है कि आप कैसे सही ढंग से कैनवास को ब्राउज़र की पूरी चौड़ाई और ऊंचाई बनाते हैं। आपको बस ड्रॉस्टफ () फ़ंक्शन में कैनवास पर ड्राइंग के लिए सभी कोड डालना होगा।

Comments

पैडिंग को हटाने और चौड़ाई, ऊंचाई 100% करने के लिए क्यों आवश्यक है?

— कोस

मेरा मानना ​​है कि यह मुख्य रूप से उपयोगकर्ता स्टाइलशीट को ओवरराइड करने के लिए है जिसके लिए ब्राउज़र में चूक है। यदि आप सीएसएस फ़ाइल को किसी तरह का सामान्य या रीसेट कर रहे हैं, तो यह आवश्यक नहीं है क्योंकि उस पर पहले से ही ध्यान रखा जाएगा।

— जेरेडविल्ली

यदि आप काफी आकार बदलने की उम्मीद करते हैं; उदाहरण के लिए एक चित्र / लैंडस्केप डिवाइस पर, आप debounceआकार बदलना चाहते हैं अन्यथा आप ब्राउज़र को भर देंगे।

— कबूतर

display: block: यह न केवल स्क्रॉलबार को हटाता है, बल्कि यह डॉक्यूमेंट बॉडी की ऊंचाई से 2px को हटाता है, जो सामान्य रूप से एक ब्लॉक के अंदर टेक्स्ट लाइनों के तहत जोड़ा जाता है। तो उसके लिए +1

— नेपचिलो

इसके अलावा कोई नहीं jQuery के लिए

— फेलिक्स गगनोन-ग्रेनियर

Answer 2

आप व्यूपोर्ट यूनिट्स (CSS3) आज़मा सकते हैं :

canvas { 
  height: 100vh; 
  width: 100vw; 
  display: block;
}

Comments

जोड़ें display: block;और यह काम करता है।

— सुपरलुक

मैंने यह कोशिश की और पाया कि क्रोम और फ़ायरफ़ॉक्स में, कैनवास बस छवि को पूर्ण व्यूपोर्ट तक फैला हुआ दिखाता है। यहां तक ​​कि नए खींचे गए तत्वों को भी बढ़ाया जाता है।

— विवियन रिवर

@ डैनियल सही है - यह जवाब गलत है । यह कैनवास के संदर्भ के आंतरिक आयाम को सेट नहीं करेगा, बल्कि DOM तत्व के आयामों को निर्धारित करेगा। अंतर के लिए, संबंधित प्रश्न के लिए मेरा उत्तर देखें ।

— Dan Dascalescu

यह विधि काम नहीं करती है, यह पाठ को फैलाती है। आप दुर्भाग्य है जे एस उपयोग करने के लिए।

— ०३६_

Answer 3

मैं अधिक सामान्य सवाल का जवाब दूंगा कि विंडो आकार के अनुसार कैनवस को गतिशील रूप से कैसे अनुकूलित किया जाए। स्वीकृत उत्तर उचित रूप से उस मामले को संभालता है जहां चौड़ाई और ऊंचाई दोनों को 100% माना जाता है, जो कि पूछा गया था, लेकिन जो कैनवास के पहलू अनुपात को भी बदल देगा। कई उपयोगकर्ता चाहेंगे कि विंडो पर आकार बदलने के लिए कैनवास का आकार बदल जाए, लेकिन पहलू अनुपात को अछूता रखते हुए। यह सटीक सवाल नहीं है, लेकिन यह "फिट बैठता है", बस सवाल को थोड़ा और सामान्य संदर्भ में लाना है।

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

सबसे महत्वपूर्ण बात जो आपको स्पष्ट होनी चाहिए: html कैनवास ऑब्जेक्ट में एक चौड़ाई विशेषता और एक ऊंचाई विशेषता है; और फिर, उसी वस्तु के सीएसएस में एक चौड़ाई और एक ऊंचाई विशेषता भी होती है। वे दो चौड़ाई और ऊंचाई अलग-अलग हैं, दोनों अलग-अलग चीजों के लिए उपयोगी हैं।

चौड़ाई और ऊंचाई विशेषताओं को बदलना एक ऐसी विधि है जिसके साथ आप हमेशा अपने कैनवास के आकार को बदल सकते हैं, लेकिन फिर आपको सब कुछ फिर से करना होगा, जिसमें समय लगेगा और हमेशा आवश्यक नहीं है, क्योंकि आकार परिवर्तन की कुछ मात्रा आप पूरा कर सकते हैं सीएसएस विशेषताओं के माध्यम से, जिस स्थिति में आप कैनवास को फिर से नहीं बनाते हैं।

मुझे लगता है कि आप खिड़की के आकार (जो एक पूर्ण स्क्रीन कैनवास के साथ शुरू हो रहा है) पर 4 मामले देख सकते हैं

1: आप चाहते हैं कि चौड़ाई 100% बनी रहे, और आप चाहते हैं कि पहलू अनुपात वैसा ही रहे जैसा वह था। उस स्थिति में, आपको कैनवास को फिर से बनाने की आवश्यकता नहीं है; आपको हैंडलर को आकार देने वाली विंडो की भी आवश्यकता नहीं है। जो तुम्हे चाहिए वो है

$(ctx.canvas).css("width", "100%");

जहाँ cxx आपके कैनवास संदर्भ है। फिडेल : रिसाइजबीड्थ

2: आप चाहते हैं कि चौड़ाई और ऊँचाई दोनों 100% रहें, और आप स्ट्रेच-आउट छवि के प्रभाव के पहलू पहलू में परिणाम चाहते हैं। अब, आपको अभी भी कैनवास को फिर से बनाने की आवश्यकता नहीं है, लेकिन आपको हैंडलर का आकार बदलने के लिए एक विंडो की आवश्यकता है। हैंडलर में, आप करते हैं

$(ctx.canvas).css("height", window.innerHeight);

फिडल: मेसविथस्पेक्ट्रियो

3: आप चाहते हैं कि चौड़ाई और ऊंचाई दोनों 100% रहें, लेकिन पहलू अनुपात में बदलाव का जवाब छवि को खींचने से कुछ अलग है। फिर आपको फिर से तैयार करने की आवश्यकता है, और इसे उस तरीके से करें जो कि स्वीकृत उत्तर में उल्लिखित है।

फ़ेडल: रेडव

4: आप चाहते हैं कि पृष्ठ लोड पर चौड़ाई और ऊँचाई 100% हो, लेकिन उसके बाद लगातार बने रहें (विंडो आकार में कोई प्रतिक्रिया नहीं)।

बेला: तय

सभी फ़िडल्स में समान कोड होता है, केवल पंक्ति 63 के अलावा जहां मोड सेट होता है। आप अपने स्थानीय मशीन पर चलने के लिए फिडल कोड को भी कॉपी कर सकते हैं, जिस स्थिति में आप क्वेरिस्ट तर्क के माध्यम से मोड का चयन कर सकते हैं, जैसा कि? मोड = redraw?

Comments

fyi: $(ctx.canvas).css("width", "100%");के बराबर है $(canvas).css("width", "100%"); (संदर्भ का कैनवास सिर्फ कैनवास है)

— ब्रैड केंट

@BradKent जब आप एक सहायक फ़ंक्शन को कॉल करते हैं जो "कैनवास-चीजें" आप चाहते हैं, तो आप या तो तर्क के रूप में कर सकते हैं (1) कैनवास ऑब्जेक्ट को पास करें, 2) कैनवास संदर्भ को पास करें, 3) दोनों। मुझे 3 पसंद नहीं है), और इससे ctx.canvasबहुत कम है canvas.getContext('2d')- यही कारण है कि मैं 2 करता हूं)। इसलिए, कैनवास नामक कोई चर नहीं है, लेकिन ctx.canvas है। यहीं से ctx.canvas आता है।

— मैथेडिनक्लाउड्स

Answer 4

http://jsfiddle.net/mqFdk/10/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

सीएसएस के साथ

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

Comments

यह काम करता है, लेकिन यह मेरे कैनवास को परिभाषित चौड़ाई और ऊंचाई के बिना छोड़ देता है। मेरे द्वारा विश्वास किए जाने वाले तत्व पर कैनवास की चौड़ाई और ऊंचाई को परिभाषित किया जाना चाहिए।

— एरिक्रिक

@ हेरिक: नहीं, आपके पास काम करने के लिए कैनवास तत्व पर स्पष्ट चौड़ाई / ऊंचाई निर्धारित करने की आवश्यकता नहीं है। यह कोड ठीक काम करना चाहिए।

— जॉन एडम्स

वास्तव में हां, कैनवास तत्वों को एक स्पष्ट चौड़ाई / ऊंचाई सेट की आवश्यकता होती है। इसके बिना वे कुछ ब्राउज़र के पूर्व-डिफ़ॉल्ट (क्रोम में, मुझे लगता है कि यह 300x150px है) आकार के लिए डिफ़ॉल्ट है। कैनवास पर सभी ड्राइंग इस आकार में व्याख्या की जाती हैं और फिर व्यूपोर्ट आकार का 100% तक बढ़ाया जाता है। अपने कैनवास में कुछ भी देखने की कोशिश करें कि मेरा क्या मतलब है - यह विकृत हो जाएगा।

— मार्क कान

यदि आप कैनवास को 100% चौड़ाई और ऊंचाई बनाने की कोशिश कर रहे हैं, तो वह बिल्कुल भी मायने नहीं रखता है। आप बस इसे वैसे भी आकार देते हैं

— jaredwilli

कैनवास तत्व के आंतरिक आयाम समन्वय अंतरिक्ष के आकार के बराबर हैं, सीएसएस पिक्सल में व्याख्या की गई संख्याओं के साथ। हालांकि, तत्व को स्टाइल शीट द्वारा मनमाने ढंग से आकार दिया जा सकता है। रेंडरिंग के दौरान, इस लेआउट आकार को फिट करने के लिए छवि को छोटा किया जाता है।

— जेरेडविल्ली

Answer 5

मैं इस प्रश्न का उत्तर भी ढूंढना चाह रहा था, लेकिन स्वीकृत उत्तर मेरे लिए टूट रहा था। जाहिरा तौर पर window.innerWidth का उपयोग करना पोर्टेबल नहीं है। यह कुछ ब्राउज़रों में काम करता है, लेकिन मैंने देखा कि फ़ायरफ़ॉक्स इसे पसंद नहीं करता था।

ग्रेग तवारेस ने यहां एक महान संसाधन पोस्ट किया जो सीधे इस मुद्दे को संबोधित करता है: http://webglfundamentals.org/webgl/lessons/webgl-ant-patterns.html (एंटी-पैटर्न # 3 और 4 देखें)।

Window.nerWidth के बजाय कैनवास का उपयोग करना।

यहाँ ग्रेग का सुझाव दिया गया लूप है:

function resize() {
  var width = gl.canvas.clientWidth;
  var height = gl.canvas.clientHeight;
  if (gl.canvas.width != width ||
      gl.canvas.height != height) {
     gl.canvas.width = width;
     gl.canvas.height = height;
     return true;
  }
  return false;
}

var needToRender = true;  // draw at least once
function checkRender() {
   if (resize() || needToRender) {
     needToRender = false;
     drawStuff();
   }
   requestAnimationFrame(checkRender);
}
checkRender();

Answer 6

()) के जवाब पर विस्तार करते हुए)

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

http://jsfiddle.net/mqFdk/356/

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

सीएसएस:

body { 
       margin: 0; 
       padding: 0
     }
#c { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     overflow: hidden
   }

जावास्क्रिप्ट:

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);

    // Draw a circle filling the canvas.
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2*Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();

Answer 7

मोबाइल के लिए, इसका उपयोग करना बेहतर है

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

क्योंकि यह ओरिएंटेशन बदलने के बाद गलत तरीके से प्रदर्शित होगा। पोर्ट्रेट को ओरिएंटेशन बदलते समय "व्यूपोर्ट" बढ़ाया जाएगा। पूरा उदाहरण देखें