Próbuję stworzyć element płótna, który zajmuje 100% szerokości i wysokości widoku.

Możesz zobaczyć w moim przykładzie tutaj, że ma miejsce, jednak dodaje paski przewijania zarówno w Chrome, jak i FireFox. Jak mogę zapobiec dodatkowym paskom przewijania i po prostu określić dokładnie szerokość i wysokość okna, aby odpowiadały rozmiarowi płótna?

Aby płótno było zawsze na całej szerokości i wysokości ekranu, co oznacza, że ​​nawet po zmianie rozmiaru przeglądarki, musisz uruchomić pętlę rysowania w funkcji, która zmienia rozmiar obszaru roboczego na window.innerHeight i window.innerWidth.

Przykład: 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 */

W ten sposób poprawnie wykonujesz płótno na pełną szerokość i wysokość przeglądarki. Wystarczy umieścić cały kod do rysowania na płótnie w funkcji drawStuff ().

Możesz wypróbować jednostki widoku (CSS3):

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

Odpowiem na bardziej ogólne pytanie, jak dynamicznie dostosowywać rozmiar płótna po zmianie rozmiaru okna. Zaakceptowana odpowiedź odpowiednio obsługuje przypadek, w którym szerokość i wysokość mają wynosić 100%, o co pytano, ale co również zmieni proporcje płótna. Wielu użytkowników będzie chciało zmienić rozmiar płótna przy zmianie rozmiaru okna, ale zachowując współczynnik proporcji nietknięty. Nie jest to dokładne pytanie, ale „pasuje”, po prostu umieszczając pytanie w nieco bardziej ogólnym kontekście.

Okno będzie miało pewne proporcje (szerokość / wysokość), podobnie jak obiekt płótna. To, w jaki sposób chcesz, aby te dwa współczynniki kształtu odnosiły się do siebie, to jedna rzecz, którą musisz wyjaśnić, nie ma jednej odpowiedzi na to pytanie - omówię kilka typowych przypadków chcieć.

Najważniejsza rzecz, o której musisz wiedzieć: obiekt html canvas ma atrybut szerokości i atrybut wysokości; a następnie css tego samego obiektu ma również atrybut szerokości i wysokości. Te dwie szerokości i wysokości są różne, obie są przydatne do różnych rzeczy.

Zmiana atrybutów szerokości i wysokości to jedna z metod, dzięki której zawsze możesz zmienić rozmiar swojego płótna, ale wtedy będziesz musiał przemalować wszystko, co zajmie trochę czasu i nie zawsze jest konieczne, ponieważ możesz dokonać pewnej zmiany rozmiaru poprzez atrybuty css, w takim przypadku nie przerysujesz płótna.

Widzę 4 przypadki tego, co może się wydarzyć przy zmianie rozmiaru okna (wszystkie zaczynają się od płótna pełnoekranowego)

1: chcesz, aby szerokość pozostała 100% i chcesz, aby współczynnik proporcji pozostał taki, jaki był. W takim przypadku nie musisz przerysowywać płótna; nie potrzebujesz nawet obsługi zmiany rozmiaru okna. Wszystko czego potrzebujesz to

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

gdzie ctx to kontekst twojego płótna. skrzypce: resizeByWidth

2: chcesz, aby szerokość i wysokość pozostały na 100%, i chcesz, aby wynikowa zmiana współczynnika proporcji miała efekt rozciągniętego obrazu. Teraz nadal nie musisz przerysowywać płótna, ale potrzebujesz programu obsługi zmiany rozmiaru okna. W programie obsługi tak

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

skrzypce: messWithAspectratio

3: chcesz, aby szerokość i wysokość pozostały w 100%, ale odpowiedź na zmianę współczynnika kształtu jest czymś innym niż rozciągnięcie obrazu. Następnie musisz przerysować i zrób to w sposób opisany w zaakceptowanej odpowiedzi.

skrzypce: przerysuj

4: chcesz, aby szerokość i wysokość były równe 100% podczas ładowania strony, ale później pozostań na stałym poziomie (brak reakcji na zmianę rozmiaru okna.

skrzypce: naprawiono

Wszystkie skrzypce mają identyczny kod, z wyjątkiem linii 63, w której ustawiono tryb. Możesz również skopiować kod skrzypcowy, aby uruchomić go na komputerze lokalnym, w którym to przypadku możesz wybrać tryb za pomocą argumentu querystring, jak? Mode = redraw

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

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

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

</body>
</html>

z CSS

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

Szukałem odpowiedzi na to pytanie, ale zaakceptowana odpowiedź była dla mnie załamująca. Najwyraźniej użycie window.innerWidth nie jest przenośne. Działa w niektórych przeglądarkach, ale zauważyłem, że Firefoxowi się to nie spodobało.

Gregg Tavares zamieścił tutaj świetne źródło, które bezpośrednio rozwiązuje ten problem: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (patrz przeciw wzorowi # 3 i 4).

Wydaje się, że użycie canvas.clientWidth zamiast window.innerWidth działa dobrze.

Oto sugerowana pętla renderowania Gregga:

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

(Rozszerzanie odpowiedzi 動靜 能量)

Stylizuj płótno, aby wypełniło ciało. Podczas renderowania na płótnie należy wziąć pod uwagę jego rozmiar.

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

W przypadku telefonów komórkowych lepiej go używać

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

ponieważ po zmianie orientacji będzie wyświetlany nieprawidłowo. „Rzutnia” zostanie zwiększona po zmianie orientacji na pionową. Zobacz pełny przykład