ฉันกำลังพยายามสร้างองค์ประกอบผ้าใบที่ใช้ความกว้างและความสูงของวิวพอร์ตได้ 100%

คุณสามารถเห็นในตัวอย่างของฉันที่นี่ที่เกิดขึ้นอย่างไรก็ตามมันคือการเพิ่มแถบเลื่อนทั้งใน Chrome และ FireFox ฉันจะป้องกันแถบเลื่อนพิเศษและเพียงแค่กำหนดความกว้างและความสูงของหน้าต่างให้เท่ากับขนาดของผืนผ้าใบได้อย่างไร

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

ตัวอย่าง: http://jsfiddle.net/jaredwilli/qFuDr/

HTML

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

JavaScript

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

CSS

* { 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 */

นั่นคือวิธีที่คุณทำ Canvas ให้เต็มความกว้างและความสูงของเบราว์เซอร์ คุณเพียงแค่ใส่รหัสทั้งหมดสำหรับการวาดลงบนผืนผ้าใบในฟังก์ชัน drawStuff ()

คุณสามารถลองใช้หน่วย viewport (CSS3):

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

ฉันจะตอบคำถามทั่วไปเพิ่มเติมเกี่ยวกับวิธีปรับขนาดผ้าใบแบบไดนามิกเมื่อปรับขนาดหน้าต่าง คำตอบที่ได้รับการยอมรับอย่างเหมาะสมจะจัดการกับกรณีที่ทั้งความกว้างและความสูงควรเป็น 100% ซึ่งเป็นสิ่งที่ถูกถาม แต่จะเปลี่ยนอัตราส่วนภาพของผืนผ้าใบด้วย ผู้ใช้หลายคนต้องการให้ Canvas ปรับขนาดบนปรับขนาดหน้าต่าง แต่ในขณะที่รักษาอัตราส่วนกว้างยาวไว้ มันไม่ใช่คำถามที่แน่นอน แต่มัน "พอดีกับ" เพียงใส่คำถามในบริบททั่วไปที่กว้างขึ้นเล็กน้อย

หน้าต่างจะมีอัตราส่วนกว้างยาว (กว้าง / สูง) และวัตถุผ้าใบจะทำเช่นนั้น คุณต้องการให้อัตราส่วนทั้งสองนี้เกี่ยวข้องกันอย่างไรเป็นสิ่งหนึ่งที่คุณจะต้องชัดเจนไม่มี "คำตอบที่เหมาะกับทุกขนาด" สำหรับคำถามนั้น - ฉันจะพูดถึงกรณีทั่วไปของสิ่งที่คุณอาจจะรู้ ต้องการ.

สิ่งที่สำคัญที่สุดที่คุณต้องมีความชัดเจนเกี่ยวกับ: วัตถุผ้าใบ html มีคุณลักษณะความกว้างและคุณลักษณะความสูง; จากนั้น css ของวัตถุเดียวกันก็มีแอตทริบิวต์ width และ height ความกว้างและความสูงทั้งสองนั้นต่างกันทั้งสองมีประโยชน์สำหรับสิ่งต่าง ๆ

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

ฉันเห็น 4 กรณีของสิ่งที่คุณอาจต้องการให้เกิดขึ้นในการปรับขนาดหน้าต่าง (ทั้งหมดเริ่มต้นด้วย Canvas แบบเต็มหน้าจอ)

1: คุณต้องการให้ความกว้างคงอยู่ 100% และคุณต้องการให้อัตราส่วนนั้นคงเดิม ในกรณีนี้คุณไม่จำเป็นต้องวาดภาพวาดบนผ้าใบอีก คุณไม่จำเป็นต้องใช้ตัวจัดการปรับขนาดหน้าต่าง สิ่งที่คุณต้องการคือ

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

โดยที่ ctx คือบริบทผ้าใบของคุณ ซอ: ปรับขนาดโดยไวด์ ธ

2: คุณต้องการให้ทั้งความกว้างและความสูงอยู่ที่ 100% และคุณต้องการให้การเปลี่ยนแปลงอัตราส่วนภาพมีผลต่อภาพที่ขยายออก ตอนนี้คุณยังไม่จำเป็นต้องวาดภาพวาดผ้าใบอีกต่อไป แต่คุณต้องมีตัวปรับขนาดหน้าต่าง ในตัวจัดการคุณทำ

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

ซอ: messWithAspectratio

3: คุณต้องการให้ทั้งความกว้างและความสูงอยู่ที่ 100% แต่คำตอบของการเปลี่ยนแปลงอัตราส่วนคือสิ่งที่แตกต่างจากการยืดภาพ จากนั้นคุณต้องวาดใหม่และทำตามที่อธิบายไว้ในคำตอบที่ยอมรับ

ซอ: วาดใหม่

4: คุณต้องการให้ความกว้างและความสูงเท่ากับ 100% สำหรับการโหลดหน้า แต่คงที่หลังจากนั้น (คงที่ไม่ตอบสนองต่อการปรับขนาดหน้าต่าง

ซอ: แก้ไขแล้ว

ซอทั้งหมดมีรหัสเหมือนกันยกเว้นบรรทัดที่ 63 ซึ่งตั้งโหมดไว้ นอกจากนี้คุณยังสามารถคัดลอกรหัสซอเพื่อเรียกใช้บนเครื่องท้องถิ่นของคุณซึ่งในกรณีนี้คุณสามารถเลือกโหมดผ่านการโต้แย้งสตริงการสืบค้นเป็น? mode = redraw

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

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

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

</body>
</html>

ด้วย CSS

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

ฉันกำลังหาคำตอบสำหรับคำถามนี้เช่นกัน แต่คำตอบที่ได้รับการตอบรับก็ไม่ดีสำหรับฉัน เห็นได้ชัดว่าใช้ window.innerWidth ไม่ใช่แบบพกพา มันใช้งานได้ในบางเบราว์เซอร์ แต่ฉันสังเกตว่า Firefox ไม่ชอบ

Gregg Tavares โพสต์แหล่งข้อมูลที่ดีที่นี่เพื่อแก้ไขปัญหานี้โดยตรง: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (ดู 3 และ 4 ของ anti-pattern #)

การใช้ canvas.clientWidth แทนที่จะเป็น window.innerWidth ดูเหมือนว่าจะทำงานได้ดี

นี่คือลูปการเรนเดอร์ที่แนะนำของ Gregg:

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

(ขยายคำตอบของ動靜能量)

จัดแต่งทรงผ้าใบเพื่อเติมเต็มร่างกาย เมื่อเรนเดอร์ไปยังผืนผ้าใบคำนึงถึงขนาดของมัน

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

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

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

</body>
</html>

CSS:

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

javascript:

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

สำหรับโทรศัพท์มือถือมันจะดีกว่าที่จะใช้

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

เพราะมันจะแสดงอย่างไม่ถูกต้องหลังจากเปลี่ยนการวางแนว“ วิวพอร์ต” จะเพิ่มขึ้นเมื่อเปลี่ยนการวางแนวเป็นแนวตั้งดู ตัวอย่างทั้งหมด