উইন্ডো ফিট করার জন্য এইচটিএমএল 5 ক্যানভাস পুনরায় আকার দিন

400

<canvas>পৃষ্ঠাটি ফিট করার জন্য কীভাবে আমি স্বয়ংক্রিয়ভাবে HTML5 উপাদানকে স্কেল করতে পারি ?

উদাহরণস্বরূপ, আমি 100% <div>এ heightএবং widthবৈশিষ্ট্যগুলি সেট করে একটি স্কেল পেতে পারি , তবে একটি <canvas>স্কেল হবে না, তাই না?

javascript html html5-canvas

— devyn
সূত্র

7

কেন ক্যানভাসের প্রস্থ: 100%; উচ্চতা: 100% work কাজ করে না?

— zloctb

28

@Zloctb - এটি সরাসরি ক্যানভাসকে বাড়িয়ে তুলবে যা আপনার চিত্রকে প্রসারিত করে।

— ডেরেক 朕會

8

সম্পর্কিত সমস্যাগুলির জন্য কী এবং কী করা উচিত নয় তার বিশদ ব্যাখ্যার জন্য ওয়েবজিএল ফান্ডামেন্টালগুলি দেখুন ।

— কিংবদন্তি 2 কে

2

একটি ক্যানভাসও সূক্ষ্ম স্কেল করবে, কেবল CSS {প্রস্থকে যুক্ত করবে: 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;}

— নিক্লাস এ।

45

এটি কি পুনরায় আকারের ইভেন্টটি শোনার পক্ষে পছন্দনীয়?

— এরিক

25

@ ইলিশাবেথ: স্ক্রোলবারগুলি থেকে মুক্তি পেতে এইচটিএমএল এবং দেহের উপাদানগুলির স্টাইলে "ওভারফ্লো: লুকানো" যুক্ত করুন। Thefutureoftheweb.com/blog/100-percent-height-interface

— ডেনিস ওয়াশিংটন

17

আমি এটি করেছি এবং প্রদর্শন করার জন্য আমি ক্যানভাসও সেট করেছি: ব্লক (এটি প্রদর্শিত হতে ডিফল্ট বলে মনে হয়েছিল: অতিরিক্ত স্থান তৈরি করছে এমন ইনলাইন!)।

— এলিজাবেথ

15

এটি একটি অ্যান্টি-প্যাটার্ন হতে পারে; কারণ এবং প্রতিকারের জন্য এখানে তৃতীয় আইটেমটি দেখুন ।

— কিংবদন্তি 2 কে

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>

নীল সীমানাটি আপনাকে পুনরায় আকার দেওয়ার ক্যানভাসের প্রান্তটি দেখায় এবং সর্বদা উইন্ডোটির প্রান্তের সাথে থাকে, যা সমস্ত চারদিকে দৃশ্যমান হয়, যা উপরের উত্তরগুলির মধ্যে কিছু ক্ষেত্রে ছিল না। আশা করি এটা সাহায্য করবে.

— ক্রেগ মরিসন
সূত্র

এই উত্তরটি আমার সমস্যার সমাধান করেছে। overflow: hiddenএবং display: blockআমাকে এই কাজ সঠিকভাবে পেতে জন্য কি অনুপস্থিত হয়।

— ডেথিকন

1

লিঙ্কটি নষ্ট হয়েছে

— নিক স্কোজজারো

22

মূলত আপনাকে যা করতে হবে তা হ'ল অনারসাইজ ইভেন্টটি আপনার শরীরে বেঁধে রাখা, ইভেন্টটি একবার ধরা পড়লে আপনার কেবল উইন্ডোজ.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

আপনি কেবল ইভেন্ট শ্রোতা ব্যবহার করতে পারেন।

— ডেভিড কর্বিন

এতে মার্জিন রয়েছে এবং স্ক্রোলবারগুলি দেখায়, কিছু করার আগে আপনাকে পর্দার আকার পরিবর্তন করতে হবে।

— আর্টঅফ ওয়ারফেয়ার

ক্যানভাস ভিউপোর্টের চেয়ে বড় হলে (ভিউপোর্টটি সংকীর্ণ বা খাটো করার সময়) কী হবে? এই সমাধানটি হ্যান্ডেল করে বলে মনে হচ্ছে না।

— লার্স গিরুপ ব্রিংক নীলসন

@ আর্টঅফ ওয়ার্ফার মূল প্রশ্নগুলি শৈলী সম্পর্কে কিছুই উল্লেখ করে না। তবে আপনি এটি সিএসএস দিয়ে স্টাইলাইজ করতে পারেন এবং মার্জিনগুলি সরিয়ে ফেলতে এবং আপনার পছন্দ হলে স্ক্রোল বারগুলি আড়াল করতে পারেন। এবং আপনি কেবল load <বডি অনলোড "=" আকার পরিবর্তন_ক্যানভাস () "> add যুক্ত করতে পারেন তারপরে পৃষ্ঠা লোডের পরে ক্যানভাসকে পুনরায় আকার দিন।

— সমতুল্য

@LayZee টেকার স্কেল মূল প্রশ্ন Saya ক্যানভাস মাপসই পৃষ্ঠা , না একটি ভিউপোর্ট। এটি অন্য প্রশ্ন হতে পারে।

— সমতুল্য

19

ব্রাউজার ক্লায়েন্টের মাত্রাগুলির উপর ভিত্তি করে ক্যানভাস স্থানাঙ্কের স্থান প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য আপনাকে যখনই ব্রাউজারের আকার পরিবর্তন করা হয় তখন আপনাকে পুনরায় আকার দিতে হবে এবং পুনরায় চিত্র তৈরি করতে হবে।

জাভাস্ক্রিপ্ট ভেরিয়েবলগুলিতে অঙ্কনীয় মাত্রা বজায় রাখার জন্য একটি কম সংশ্লেষযুক্ত সমাধান হ'ল স্ক্রিন.উইথ, স্ক্রিন.হাইটের মাত্রার উপর ভিত্তি করে ক্যানভাস মাত্রা নির্ধারণ করুন। ফিট করার জন্য সিএসএস ব্যবহার করুন:

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

ব্রাউজার উইন্ডো সাধারণত স্ক্রিনের চেয়ে কখনও বড় হতে পারে না (পর্দার রেজোলিউশনটি যেখানে ভুল-ভুল হয় সেখানে বাদে, এটি ডুয়াল মনিটরের সাথে মিল না থাকায়), তাই পটভূমিটি প্রদর্শিত হবে না এবং পিক্সেলের অনুপাতও পৃথক হবে না। আপনি ক্যানভাস স্কেল করতে সিএসএস ব্যবহার না করা হলে ক্যানভাস পিক্সেলগুলি স্ক্রিন রেজোলিউশনের সাথে সরাসরি আনুপাতিক হবে।

— jerseyboy
সূত্র

7

সিএসএসের সাহায্যে ক্যানভাস পুনরুদ্ধার করা কষ্টকর। কমপক্ষে ক্রোম এবং সাফারিতে, মাউস / টাচ ইভেন্টের অবস্থানগুলি ক্যানভাস পিক্সেল পজিশনের সাথে 1: 1 এর সাথে মিলবে না এবং আপনাকে স্থানাঙ্ক সিস্টেমগুলিকে রূপান্তর করতে হবে।

— জার্সিবিয়

14

উপরের @ জার্সিবয়ের সমাধানে যুক্ত একটি খাঁটি সিএসএস পদ্ধতি approach
ফায়ারফক্স (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-window.html

তবে সাবধান হন, যেমন @ জার্সিবয় তার মন্তব্যে বলেছেন:

সিএসএসের সাহায্যে ক্যানভাস পুনরুদ্ধার করা কষ্টকর। কমপক্ষে ক্রোম এবং সাফারিতে, মাউস / টাচ ইভেন্টের অবস্থানগুলি ক্যানভাস পিক্সেল পজিশনের সাথে 1: 1 এর সাথে মিলবে না এবং আপনাকে স্থানাঙ্ক সিস্টেমগুলিকে রূপান্তর করতে হবে।

— ভোলকার ই।
সূত্র

5

সিএসএসের উপায়ে ক্যানভাস প্রসারিত হয়, সুতরাং রেন্ডার করা চিত্রগুলি প্রসারিত হয়। ক্যানভাসের আকারের তুলনায় এটি ভাল নয়। সামান্য সামঞ্জস্য হওয়ার সাথে সাথে ক্রেগের উত্তর সবচেয়ে ভাল কাজ করে।

— নয়ন

আমি এই সমাধানটি পছন্দ করি কারণ এটি প্যারেন্ট প্রস্থের উপর ভিত্তি করে 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);

— পেত্র
সূত্র

চমৎকার, যখন অনুপাতটি গুরুত্বপূর্ণ

— সরকারকোলা

8

আপনি যদি না চান যে ক্যানভাস আপনার চিত্রের ডেটা স্বয়ংক্রিয়ভাবে উপড়ে ফেলতে পারে (এটিই জেমস ব্লকের উত্তরটি বলেছে তবে এটি দেখতে সুন্দর লাগবে না), আপনাকে নিজের আকারটি পরিবর্তন করতে হবে এবং চিত্রটি আবার আঁকতে হবে। একটি ক্যানভাস কেন্দ্র করে

— নিকোলে
সূত্র

4

যদি আপনার ডিভি পুরোপুরি ওয়েবপৃষ্ঠায় ভরে থাকে তবে আপনি সেই ডিভিটি পূরণ করতে পারেন এবং এমন একটি ক্যানভাস থাকতে পারে যা ডিভটি পূরণ করে।

আপনি এটি আকর্ষণীয় বলে মনে করতে পারেন, যেমন শতাংশ ব্যবহারের জন্য আপনাকে সিএসএস ব্যবহারের প্রয়োজন হতে পারে তবে আপনি কোন ব্রাউজারটি ব্যবহার করছেন এবং কী পরিমাণ এই অনুমানের সাথে একমত হয়েছেন তা নির্ভর করে: http : //www . কিটব্যাগ.org / চশমা / ওয়েব-অ্যাপ্লিকেশান / বর্তমান কাজ / multipage /-ক্যানভাস-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

আপনি যদি অনুপাতের অনুপাত সংরক্ষণ এবং খাঁটি সিএসএসে (দিক অনুপাত দেওয়া থাকে) করতে আগ্রহী হন তবে নীচের মতো কিছু করতে পারেন। চাবিকাঠি 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 ব্যবহার করে আপনার ক্যানভাসের প্রস্থও পরিবর্তন করতে পারবেন।

এরকম কিছু

$( 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

আমি স্কেচ.জেএস ব্যবহার করছি তাই ক্যানভাসের জন্য init কমান্ড চালানোর পরে আমি jquery দিয়ে প্রস্থ এবং উচ্চতা পরিবর্তন করি। এটি প্যারেন্ট উপাদানগুলির উপর ভিত্তি করে।

$ ( '# DrawCanvas')। স্কেচ ()। ATTR ( 'উচ্চতা', $ ( '# DrawCanvas')। পিতা বা মাতা ()। উচ্চতা ())। ATTR ( 'প্রস্থ', $ ( '# DrawCanvas')। পিতা বা মাতা () .width ());

— moeiscool
সূত্র