Tôi đang cố gắng tạo một phần tử canvas chiếm 100% chiều rộng và chiều cao của khung nhìn.

Bạn có thể thấy trong ví dụ của tôi ở đây đang xảy ra, tuy nhiên nó đang thêm các thanh cuộn trong cả Chrome và FireFox. Làm cách nào tôi có thể ngăn các thanh cuộn thêm và chỉ cung cấp chính xác chiều rộng và chiều cao của cửa sổ là kích thước của khung vẽ?

Để luôn luôn làm cho chiều rộng và chiều cao của màn hình đầy đủ, có nghĩa là ngay cả khi trình duyệt được thay đổi kích thước, bạn cần chạy vòng vẽ của mình trong một chức năng thay đổi kích thước của khung vẽ sang window.innerHeight và window.innerWidth.

Ví dụ: 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 */

Đó là cách bạn làm cho khung vẽ đầy đủ chiều rộng và chiều cao của trình duyệt. Bạn chỉ cần đặt tất cả mã để vẽ vào khung vẽ trong hàm drawStuff ().

Bạn có thể thử các đơn vị khung nhìn (CSS3):

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

Tôi sẽ trả lời câu hỏi chung hơn về làm thế nào để có một khung vẽ tự động thích ứng kích thước khi thay đổi kích thước cửa sổ. Câu trả lời được chấp nhận xử lý thích hợp trường hợp cả chiều rộng và chiều cao được cho là 100%, đó là những gì được yêu cầu, nhưng cũng sẽ thay đổi tỷ lệ khung hình của khung vẽ. Nhiều người dùng sẽ muốn thay đổi kích thước khung hình trên thay đổi kích thước cửa sổ, nhưng vẫn giữ nguyên tỷ lệ khung hình. Đây không phải là câu hỏi chính xác, nhưng nó "phù hợp", chỉ đặt câu hỏi vào một bối cảnh chung hơn một chút.

Cửa sổ sẽ có một số tỷ lệ khung hình (chiều rộng / chiều cao) và đối tượng canvas cũng vậy. Bạn muốn hai tỷ lệ khung hình này liên quan với nhau như thế nào là một điều bạn sẽ phải rõ ràng, không có câu trả lời "một kích thước phù hợp cho tất cả" cho câu hỏi đó - Tôi sẽ xem xét một số trường hợp phổ biến về những gì bạn có thể muốn

Điều quan trọng nhất bạn phải rõ ràng: đối tượng canvas html có thuộc tính width và thuộc tính height; và sau đó, css của cùng một đối tượng cũng có thuộc tính chiều rộng và chiều cao. Hai chiều rộng và chiều cao đó là khác nhau, cả hai đều hữu ích cho những thứ khác nhau.

Thay đổi các thuộc tính chiều rộng và chiều cao là một phương pháp mà bạn luôn có thể thay đổi kích thước của khung vẽ, nhưng sau đó bạn sẽ phải sơn lại mọi thứ, sẽ mất thời gian và không phải lúc nào cũng cần thiết, bởi vì một số lượng thay đổi kích thước bạn có thể thực hiện thông qua các thuộc tính css, trong trường hợp đó bạn không vẽ lại khung vẽ.

Tôi thấy 4 trường hợp về những gì bạn có thể muốn xảy ra trên thay đổi kích thước cửa sổ (tất cả bắt đầu bằng một khung hình toàn màn hình)

1: bạn muốn chiều rộng duy trì 100% và bạn muốn tỷ lệ khung hình được giữ nguyên. Trong trường hợp đó, bạn không cần vẽ lại khung vẽ; bạn thậm chí không cần một trình xử lý thay đổi kích thước cửa sổ. Tất cả bạn cần là

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

trong đó ctx là bối cảnh vải của bạn. fiddle: thay đổi kích thướcByWidth

2: bạn muốn cả chiều rộng và chiều cao đều ở mức 100% và bạn muốn thay đổi kết quả về tỷ lệ khung hình để có hiệu ứng của hình ảnh kéo dài. Bây giờ, bạn vẫn không cần vẽ lại khung vẽ, nhưng bạn cần một trình xử lý thay đổi kích thước cửa sổ. Trong xử lý, bạn làm

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

fiddle: messWithAspectratio

3: bạn muốn cả chiều rộng và chiều cao đều giữ nguyên 100%, nhưng câu trả lời cho sự thay đổi tỷ lệ khung hình là một cái gì đó khác với việc kéo dài hình ảnh. Sau đó, bạn cần vẽ lại, và làm theo cách được nêu trong câu trả lời được chấp nhận.

fiddle: vẽ lại

4: bạn muốn chiều rộng và chiều cao là 100% khi tải trang, nhưng không đổi sau đó (không có phản ứng thay đổi kích thước cửa sổ.

fiddle: đã sửa

Tất cả các câu đố có mã giống hệt nhau, ngoại trừ dòng 63 nơi chế độ được đặt. Bạn cũng có thể sao chép mã fiddle để chạy trên máy cục bộ của mình, trong trường hợp đó bạn có thể chọn chế độ thông qua đối số chuỗi truy vấn, như? Mode = vẽ lại

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

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

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

</body>
</html>

với CSS

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

Tôi đang tìm kiếm câu trả lời cho câu hỏi này, nhưng câu trả lời được chấp nhận đã phá vỡ cho tôi. Rõ ràng là sử dụng window.innerWidth không thể di động. Nó hoạt động trong một số trình duyệt, nhưng tôi nhận thấy Firefox không thích nó.

Gregg Tavares đã đăng một tài nguyên tuyệt vời ở đây để giải quyết vấn đề này trực tiếp: http://webglfundamentals.org/webgl/lessons/webgl-anti-potypes.html (Xem phần chống mẫu số 3 và 4).

Sử dụng canvas.clientWidth thay vì window.innerWidth dường như hoạt động độc đáo.

Đây là vòng lặp kết xuất được đề xuất của 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();

(Mở rộng theo câu trả lời của))

Phong cách vải để lấp đầy cơ thể. Khi kết xuất vào khung vẽ, hãy tính đến kích thước của nó.

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

Đối với điện thoại di động, tốt hơn là sử dụng nó

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

bởi vì nó sẽ hiển thị không chính xác sau khi thay đổi hướng. Chế độ xem trực quan sẽ được tăng lên khi thay đổi hướng thành chân dung. Xem ví dụ đầy đủ