ปรับขนาดผ้าใบ HTML5 ให้พอดีกับหน้าต่าง

400

ฉันจะปรับขนาด<canvas>องค์ประกอบHTML5 โดยอัตโนมัติเพื่อให้พอดีกับหน้าได้อย่างไร

ตัวอย่างเช่นฉันสามารถเพิ่ม<div>ขนาดได้โดยการตั้งค่าheightและwidthคุณสมบัติเป็น 100% แต่<canvas>จะไม่ขยายขนาดใช่หรือไม่

javascript html html5-canvas

— Devyn
แหล่งที่มา

7

ทำไมผ้าใบ {width: 100%; ความสูง: 100%} ไม่ทำงาน

— zloctb

28

@zloctb - นั่นจะเป็นการขยายผืนผ้าใบโดยตรงซึ่งขยายภาพของคุณ

— Derek 朕會功夫

8

ดูพื้นฐาน WebGLสำหรับคำอธิบายโดยละเอียดเกี่ยวกับสิ่งที่และไม่ควรทำสำหรับปัญหาที่เกี่ยวข้อง

— ตำนาน 2k

2

ผ้าใบจะปรับขนาดได้ด้วยเพียงเพิ่ม css {width: 100%} เนื้อหาของมันจะไม่เป็นเช่นนั้นนั่นเป็นอีกเรื่องหนึ่งโดยสิ้นเชิง!

— ejectamenta

372

ฉันเชื่อว่าฉันได้พบวิธีแก้ปัญหาที่ยอดเยี่ยมสำหรับสิ่งนี้:

JavaScript

/* 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...
}

CSS

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

จนถึงขณะนี้ยังไม่เคยมีผลการดำเนินงานเชิงลบขนาดใหญ่

— Devyn
แหล่งที่มา

7

คุณอาจต้องปิดการใช้งานมาร์จิ้นด้วยbody, html { margin: 0px;}

— Nicklas A.

45

สิ่งนี้ดีกว่าที่จะฟังเหตุการณ์การปรับขนาดหรือไม่?

— เอริค

25

@Elisabeth: เพื่อกำจัดแถบเลื่อนให้เพิ่ม "overflow: hidden" ในสไตล์ขององค์ประกอบ html และ body ดูthefutureoftheweb.com/blog/100-percent-height-interface

— Denis Washington

17

ฉันทำสิ่งนี้บวกฉันยังตั้งค่า Canvas เป็น display: block (ดูเหมือนว่าจะเป็นค่าเริ่มต้นที่จะแสดง: แบบอินไลน์ซึ่งสร้างพื้นที่พิเศษ!)

— Elisabeth

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 ด้านซึ่งไม่ใช่กรณีของคำตอบข้างต้นอื่น ๆ หวังว่ามันจะช่วย

— Craig Morrison
แหล่งที่มา

คำตอบนี้แก้ปัญหาของฉันได้ overflow: hiddenและdisplay: blockคือสิ่งที่ขาดหายไปสำหรับผมที่จะได้รับการทำงานอย่างถูกต้อง

— Deathicon

1

ลิงก์ใช้งานไม่ได้

— Nic Scozzaro

22

โดยทั่วไปสิ่งที่คุณต้องทำคือการผูกเหตุการณ์ onresize กับร่างกายของคุณเมื่อคุณจับเหตุการณ์ที่คุณต้องปรับขนาดผ้าใบโดยใช้ 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

คุณสามารถใช้ฟังเหตุการณ์

— David Corbin

นี่เป็นระยะขอบและแสดงแถบเลื่อนรวมถึงคุณต้องปรับขนาดหน้าจอก่อนที่จะทำอะไรก็ได้

— ArtOfWarfare

จะเป็นอย่างไรถ้าผืนผ้าใบมีขนาดใหญ่กว่าวิวพอร์ต (เมื่อทำให้วิวพอร์ตแคบลงหรือสั้นลง) วิธีแก้ปัญหานี้ดูเหมือนจะไม่จัดการ

— Lars Gyrup Brink Nielsen

@ArtOfWarfare คำถามดั้งเดิมไม่ได้พูดถึงอะไรเกี่ยวกับสไตล์ แต่คุณสามารถเปลี่ยนสไตล์ด้วย css และกำจัดระยะขอบและซ่อนแถบเลื่อนหากคุณต้องการ และคุณสามารถเพิ่ม `<body onload =" resize_canvas () "> 'จากนั้นเมื่อโหลดหน้าเว็บจากนั้นปรับขนาดผ้าใบ

— equiman

@LayZee คำถามเดิมเกี่ยวกับการปรับขนาดผ้าใบให้พอดีกับหน้าไม่ใช่วิวพอร์ต นั่นอาจเป็นคำถามอื่น

— equiman

19

การตั้งค่าความกว้างและความสูงของพื้นที่ประสานงานผ้าใบขึ้นอยู่กับขนาดของเบราว์เซอร์ไคลเอ็นต์คุณต้องปรับขนาดและวาดใหม่ทุกครั้งที่ปรับขนาดเบราว์เซอร์

วิธีแก้ปัญหาที่ซับซ้อนน้อยคือการรักษาขนาด drawable ในตัวแปร Javascript แต่ตั้งค่าขนาด Canvas ตามขนาดหน้าจอแบนด์วิดท์หน้าจอความสูง ใช้ CSS เพื่อให้พอดีกับ:

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

โดยทั่วไปแล้วหน้าต่างเบราว์เซอร์จะไม่ใหญ่กว่าหน้าจอตัวเอง (ยกเว้นที่ความละเอียดหน้าจอถูกรายงานผิดเนื่องจากอาจมีจอภาพที่ไม่ตรงกันสองจอ) ดังนั้นพื้นหลังจะไม่แสดงและสัดส่วนพิกเซลจะไม่แตกต่างกัน พิกเซลผืนผ้าใบจะเป็นสัดส่วนโดยตรงกับความละเอียดหน้าจอเว้นแต่คุณจะใช้ CSS เพื่อปรับขนาดผืนผ้าใบ

— jerseyboy
แหล่งที่มา

7

การย่อขนาด Canvas ด้วย CSS ใหม่เป็นเรื่องลำบาก อย่างน้อยใน Chrome และ Safari ตำแหน่งเหตุการณ์เมาส์ / สัมผัสจะไม่สอดคล้องกับ 1: 1 กับตำแหน่งพิกเซลผ้าใบและคุณจะต้องเปลี่ยนระบบพิกัด

— jerseyboy

14

บริสุทธิ์ CSSวิธีการเพิ่มการแก้ปัญหาของ @jerseyboy ดังกล่าวข้างต้น
ใช้งานได้ใน Firefox (ทดสอบใน v29), Chrome (ทดสอบใน v34) และ Internet Explorer (ทดสอบใน 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

แต่ระวังอย่างที่ @ jerseyboy ระบุไว้ในความคิดเห็นของเขา:

การย่อขนาด Canvas ด้วย CSS ใหม่เป็นเรื่องลำบาก อย่างน้อยใน Chrome และ Safari ตำแหน่งเหตุการณ์เมาส์ / สัมผัสจะไม่สอดคล้องกับ 1: 1 กับตำแหน่งพิกเซลผ้าใบและคุณจะต้องเปลี่ยนระบบพิกัด

— วอลเกอร์อี
แหล่งที่มา

5

วิธี CSS ยืดผืนผ้าใบภาพที่แสดงจึงยืดออก สิ่งนี้ไม่ดีเมื่อเทียบกับการปรับขนาดผืนผ้าใบ คำตอบของ Craig นั้นดีที่สุด

— Nayan

ฉันชอบโซลูชันนี้เพราะจะทำให้ผ้าใบ 100% ตามความกว้างของพาเรนต์

— Maihan Nijat

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
แหล่งที่มา

ดีเมื่ออัตราส่วนมีความสำคัญ

— sarkiroka

8

ถ้าคุณไม่ต้องการให้ผืนผ้าใบยกระดับข้อมูลภาพของคุณโดยอัตโนมัติ (นั่นคือสิ่งที่เจมส์แบล็กตอบไว้ แต่มันจะดูไม่สวย) คุณต้องปรับขนาดด้วยตัวคุณเองและวาดภาพใหม่ การจัดกึ่งกลางผืนผ้าใบ

— Nickolay
แหล่งที่มา

4

หาก div ของคุณเติมเต็มหน้าเว็บอย่างสมบูรณ์คุณสามารถเติม div นั้นได้ดังนั้นจึงมีผืนผ้าใบที่เติมเต็ม div

คุณอาจพบว่าสิ่งนี้น่าสนใจเนื่องจากคุณอาจต้องใช้ css เพื่อใช้เปอร์เซ็นต์ แต่ขึ้นอยู่กับว่าคุณใช้เบราว์เซอร์ใดและมีข้อตกลงกับสเป็คเท่าใด: http://www.whatwg.org/ รายละเอียด / เว็บแอพพลิเค / ปัจจุบัน / งานหลาย / the-ผ้าใบ element.html # ที่ผ้าใบองค์ประกอบ

ขนาดที่แท้จริงขององค์ประกอบผ้าใบเท่ากับขนาดของพื้นที่พิกัดโดยที่ตัวเลขตีความใน CSS พิกเซล อย่างไรก็ตามองค์ประกอบสามารถปรับขนาดได้ตามสไตล์ชีต ในระหว่างการเรนเดอร์รูปภาพจะถูกปรับอัตราส่วนให้พอดีกับขนาดเค้าโครงนี้

คุณอาจต้องได้รับ offsetWidth และความสูงของ div หรือรับความสูง / ความกว้างของหน้าต่างและตั้งค่านั้นเป็นค่าพิกเซล

— James Black
แหล่งที่มา

3

CSS

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

JavaScript

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();
});

— Martin Wantke
แหล่งที่มา

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;">

ขยายตัวอย่างข้อมูล

— ราฟาเอล Andrade
แหล่งที่มา

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);

— Arvind Bhardwaj
แหล่งที่มา

-2

ฉันใช้ sketch.js ดังนั้นหลังจากที่ฉันเรียกใช้คำสั่ง init สำหรับแคนวาสฉันจะเปลี่ยนความกว้างและความสูงด้วย jquery มันฐานขนาดในองค์ประกอบหลัก

$ ( '# DrawCanvas'). ร่าง (). attr ( 'สูง', $ ( '# DrawCanvas'). ผู้ปกครอง. () ความสูง ()). attr ( 'กว้าง', $ ( '# DrawCanvas'). ผู้ปกครอง () ความกว้าง ());

— moeiscool
แหล่งที่มา