HTML5 कैनवास को फिट करने के लिए विंडो का आकार बदलें

400

मैं <canvas>पेज को फिट करने के लिए एचटीएमएल 5 तत्व को स्वचालित रूप से कैसे माप सकता हूं ?

उदाहरण के लिए, मैं 100% और गुण <div>सेट करके एक स्केल टू स्केल प्राप्त कर सकता हूं , लेकिन क्या यह पैमाना नहीं होगा?heightwidth<canvas>

javascript html html5-canvas

— Devyn
स्रोत

7

क्यों कैनवास {चौड़ाई: 100%; ऊंचाई: 100%} काम नहीं करते?

— zloctb

28

@zloctb - यह सीधे कैनवास को स्केल करेगा, जो आपकी छवि को फैलाता है।

— डेरेक 會會

8

संबंधित मुद्दों के लिए क्या करना है और क्या नहीं, इस पर विस्तृत विवरण के लिए WebGL बुनियादी बातों को देखें ।

— लीजेंड 2k

2

एक कैनवास भी ठीक पैमाने पर होगा, बस सीएसएस {चौड़ाई: 100%} जोड़ें, इसकी सामग्री हालांकि नहीं होगी, यह पूरी तरह से एक और मामला है!

— इवेज़ामेना

372

मेरा मानना है कि मुझे इसका एक सुंदर समाधान मिल गया है:

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

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

सीएसएस

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

मेरे लिए अब तक कोई बड़ा नकारात्मक प्रदर्शन प्रभाव नहीं पड़ा है।

— Devyn
स्रोत

7

आप शायद के साथ अक्षम मार्जिन के लिए हैbody, html { margin: 0px;}

— Nicklas ए

45

क्या यह आकार बदलने वाली घटना को सुनने के लिए बेहतर है?

— एरिक

25

@ एलिसबेथ: स्क्रॉलबार से छुटकारा पाने के लिए, html और बॉडी एलिमेंट्स की शैली में "ओवरफ्लो: हिडन" जोड़ें। देखें thefutureoftheweb.com/blog/100-percent-height-interface

— डेनिस वाशिंगटन

17

मैंने इस प्लस को प्रदर्शित करने के लिए कैनवास भी सेट किया: ब्लॉक (यह प्रदर्शित करने के लिए डिफ़ॉल्ट रूप से प्रतीत होता है: इनलाइन जो अतिरिक्त स्थान बना रहा था!)।

— एलिजाबेथ

15

यह एक विरोधी पैटर्न हो सकता है; देखने के लिए यहाँ तीसरे आइटम कारण और उपाय के लिए।

— लीजेंड 2k

67

निम्नलिखित समाधान ने मेरे लिए सबसे अच्छा काम किया। चूंकि मैं कोडिंग के लिए अपेक्षाकृत नया हूं, मुझे दृश्य की पुष्टि करना पसंद है कि कुछ इस तरह से काम कर रहा है जिससे मुझे उम्मीद है। मैंने इसे निम्न साइट पर पाया: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

यहाँ कोड है:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (function() {
        var
        // Obtain a reference to the canvas element using its id.
        htmlCanvas = document.getElementById('c'),
        // Obtain a graphics context on the canvas element for drawing.
        context = htmlCanvas.getContext('2d');

       // Start listening to resize events and draw canvas.
       initialize();

       function initialize() {
           // Register an event listener to call the resizeCanvas() function 
           // each time the window is resized.
           window.addEventListener('resize', resizeCanvas, false);
           // Draw canvas border for the first time.
           resizeCanvas();
        }

        // Display custom canvas. In this case it's a blue, 5 pixel 
        // border that resizes along with the browser window.
        function redraw() {
           context.strokeStyle = 'blue';
           context.lineWidth = '5';
           context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
        }

        // Runs each time the DOM window resize event fires.
        // Resets the canvas dimensions to match window,
        // then draws the new borders accordingly.
        function resizeCanvas() {
            htmlCanvas.width = window.innerWidth;
            htmlCanvas.height = window.innerHeight;
            redraw();
        }
    })();

    </script>
</body> 
</html>

नीली सीमा आपको आकार बदलने वाले कैनवास के किनारे दिखाती है, और हमेशा खिड़की के किनारे पर होती है, जो सभी 4 तरफ दिखाई देती है, जो कि ऊपर दिए गए कुछ अन्य उत्तरों के लिए नहीं थी। आशा है ये मदद करेगा।

— क्रेग मॉरिसन
स्रोत

इस जवाब ने मेरी समस्या हल कर दी। overflow: hiddenऔर display: blockमुझे इस काम के लिए ठीक से पाने के लिए क्या याद आ रही थी है।

— डेथिकॉन

1

लिंक टूटा हुआ है

— निक स्कोज़ेरो

22

मूल रूप से आपको जो करना है, वह आपके शरीर पर होने वाली घटना को बाँधने के लिए है, एक बार जब आप इस घटना को पकड़ लेते हैं तो आपको बस window.innerWidth और window.innerHeight का उपयोग करके कैनवास का आकार बदलना होगा।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>

    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>

<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>

— equiman
स्रोत

1

आप सिर्फ एक ईवेंट श्रोता का उपयोग कर सकते हैं।

— डेविड कॉर्बिन

इसमें मार्जिन है और स्क्रॉलबार दिखाता है, साथ ही आपको कुछ भी करने से पहले स्क्रीन का आकार बदलना होगा।

— आर्टऑफवर्फ

क्या होगा यदि कैनवास व्यूपोर्ट से बड़ा है (व्यूपोर्ट को संकरा या छोटा करते समय)? इस समाधान को संभालने के लिए प्रतीत नहीं होता है।

— लार्स सिरप ब्रिंक नील्सन

@ArtOfWarfare मूल प्रश्नों में शैलियों के बारे में कुछ भी उल्लेख नहीं है। लेकिन आप इसे सीएसएस के साथ स्टाइल कर सकते हैं और मार्जिन को हटा सकते हैं और यदि आप चाहें तो स्क्रॉल बार छिपा सकते हैं। और आप बस `<body onload =" resize_canvas () ">" जोड़ सकते हैं जब पृष्ठ लोड होता है तब कैनवास का आकार बदलें।

— बराबर

पेज को फिट करने के लिए @LayZee मूल प्रश्न Saya मुक्केबाज़ी का पैमाना है , व्यूपोर्ट नहीं। यह एक और सवाल हो सकता है।

— बराबर

19

ब्राउज़र क्लाइंट के आयामों के आधार पर कैनवास को समन्वयित करने के लिए स्पेस की चौड़ाई और ऊँचाई को निर्धारित करना होता है, जब भी ब्राउज़र को आकार दिया जाता है, तो आपको आकार बदलने और फिर से तैयार करने की आवश्यकता होती है।

एक कम संकल्पित समाधान जावास्क्रिप्ट चर में आकर्षित आयामों को बनाए रखने के लिए है, लेकिन स्क्रीन पर आधारित कैनवास आयाम सेट करें। स्क्रीन, स्क्रीन आयाम। फिट होने के लिए CSS का उपयोग करें:

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

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

— jerseyboy
स्रोत

7

सीएसएस के साथ कैनवास को बदलना परेशानी भरा है। कम से कम क्रोम और सफारी पर, माउस / टच इवेंट पोजीशन कैनवास पिक्सल्स पोजिशन के साथ 1: 1 के अनुरूप नहीं होंगे, और आपको समन्वय प्रणालियों को बदलना होगा।

— जर्सीबॉय

14

ऊपर शुद्ध @jerseyboy के समाधान के लिए एक शुद्ध सीएसएस दृष्टिकोण।
फ़ायरफ़ॉक्स (v29 में परीक्षण), क्रोम (v34 में परीक्षण) और इंटरनेट एक्सप्लोरर (v11 में परीक्षण) में काम करता है।

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

उदाहरण के लिए लिंक: http://temporaer.net/open/so/140502_canvas-fit-to-wind3.html

लेकिन ध्यान रखें, @jerseyboy अपनी टिप्पणी में कहता है:

सीएसएस के साथ कैनवास को बदलना परेशानी भरा है। कम से कम क्रोम और सफारी पर, माउस / टच इवेंट पोजीशन कैनवास पिक्सल्स पोजिशन के साथ 1: 1 के अनुरूप नहीं होंगे, और आपको समन्वय प्रणालियों को बदलना होगा।

— वोल्कर ई।
स्रोत

5

CSS तरीका कैनवस को फैलाता है, इस प्रकार प्रदान की गई छवियां खिंच जाती हैं। यह कैनवास को आकार देने की तुलना में अच्छा नहीं है। थोड़ा समायोजन के साथ, क्रेग का जवाब सबसे अच्छा काम करता है।

— नयन

मुझे यह समाधान पसंद है क्योंकि यह मूल चौड़ाई के आधार पर कैनवास को 100% बनाता है।

— मैहान निजात

9

function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);

— Petr
स्रोत

अच्छा है, जब अनुपात महत्वपूर्ण है

— सर्किरोका

8

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

— Nickolay
स्रोत

4

यदि आपका div पूरी तरह से वेबपेज भर गया है, तो आप उस div को भर सकते हैं और इसलिए एक कैनवास है जो div को भरता है।

आपको यह दिलचस्प लग सकता है, क्योंकि आपको प्रतिशत का उपयोग करने के लिए सीएसएस का उपयोग करने की आवश्यकता हो सकती है, लेकिन, यह इस बात पर निर्भर करता है कि आप किस ब्राउज़र का उपयोग कर रहे हैं, और यह कल्पना के साथ कितना है: http://www.whatwg.org/ चश्मा / वेब क्षुधा / वर्तमान काम / मल्टीपेज /-कैनवास-element.html #-कैनवास तत्व

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

आपको ऑफसेटवेट और डिव की ऊंचाई प्राप्त करने की आवश्यकता हो सकती है, या विंडो की ऊंचाई / चौड़ाई प्राप्त कर सकते हैं और इसे पिक्सेल मान के रूप में सेट कर सकते हैं।

— जेम्स ब्लैक
स्रोत

3

सीएसएस

body { margin: 0; } 
canvas { display: block; }

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

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});

— मार्टिन विटेके
स्रोत

3

यदि आप पहलू अनुपात को संरक्षित करने और शुद्ध CSS (पहलू अनुपात को देखते हुए) में रुचि रखते हैं, तो आप नीचे कुछ कर सकते हैं। कुंजी padding-bottomउस ::contentतत्व पर है जो तत्व को आकार देता containerहै। यह अपने माता-पिता की चौड़ाई के सापेक्ष आकार का है, जो 100%डिफ़ॉल्ट रूप से है। यहां निर्दिष्ट अनुपात को canvasतत्व पर आकारों के अनुपात के साथ मेल खाना है।

// Javascript

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

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);

/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>

स्निपेट का विस्तार करें

— mrmcgreg
स्रोत

2

JQuery का उपयोग करके आप विंडो को आकार बदल सकते हैं और अपने कैनवास की चौड़ाई को jQuery का उपयोग करके बदल सकते हैं।

ऐसा कुछ

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

स्निपेट का विस्तार करें

— राफेल एंड्रेड
स्रोत

1

(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());

— lokers
स्रोत

0

मुझे लगता है कि हमें यही करना चाहिए: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);

— अरविंद भारद्वाज
स्रोत

-2

मैं sketch.js का उपयोग कर रहा हूं, इसलिए जब मैं कैनवास के लिए init कमांड चलाता हूं तो मैं jquery के साथ चौड़ाई और ऊंचाई बदल देता हूं। यह मूल तत्व पर आयामों को आधार बनाता है।

$ ( '# DrawCanvas')। स्केच ()। Attr ( 'ऊंचाई', $ ( '# DrawCanvas')। माता-पिता ()। ऊंचाई ())। Attr ( 'चौड़ाई', $ ( '# DrawCanvas')। माता-पिता ()।चौड़ाई());

— moeiscool
स्रोत