Görünümün genişliği ve yüksekliğinin% 100'ünü kaplayan bir tuval öğesi oluşturmaya çalışıyorum.

Benim örnekte görebileceğiniz burada ancak Chrome ve Firefox hem de kaydırma çubukları ekleyerek olur gerçekleşiyor. Ekstra kaydırma çubuklarını nasıl önleyebilirim ve sadece pencerenin genişliğini ve yüksekliğini tuvalin boyutu olarak nasıl sağlayabilirim?

Tuvali tam ekran genişliği ve yüksekliğini her zaman yapmak için, yani tarayıcı yeniden boyutlandırıldığında bile, çizim döngünüzü tuvali pencereye yeniden boyutlandıran bir işlev içinde çalıştırmanız gerekir.

Örnek: 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 */

Tuvali tam olarak tarayıcının tam genişliğini ve yüksekliğini bu şekilde yaparsınız. Çizim için tüm kodu drawStuff () işlevinde tuvale koymanız yeterlidir.

Görüntü birimi birimlerini (CSS3) deneyebilirsiniz :

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

Pencere yeniden boyutlandırıldığında tuvalin dinamik olarak nasıl uyarlanacağına dair daha genel soruyu cevaplayacağım. Kabul edilen cevap, genişliğin ve yüksekliğin her ikisinin de% 100 olması gerektiği, bu da istenen kanvasın en boy oranını değiştireceği durumu uygun şekilde ele alır. Birçok kullanıcı, en boy oranına dokunmadan tuvalin yeniden boyutlandırılmasında yeniden boyutlandırılmasını isteyecektir. Bu tam bir soru değil, ama soruyu biraz daha genel bir bağlama sokarak "uyuyor".

Pencerenin bir en boy oranı (genişlik / yükseklik) ve tuval nesnesi de olacaktır. Bu iki en-boy oranının birbiriyle ilişkisini nasıl istediğinizi açıklığa kavuşturmanız gereken bir şey var, bu soruya "tek beden herkese uyar" diye bir cevap yok - Neler yapabileceğinize dair bazı genel durumlardan geçeceğim istemek.

Açık olmanız gereken en önemli şey: html canvas nesnesinin bir width özelliği ve height özelliği vardır; ve sonra aynı nesnenin css'si de bir width ve height özelliğine sahiptir. Bu iki genişlik ve yükseklik farklıdır, ikisi de farklı şeyler için yararlıdır.

Genişlik ve yükseklik özelliklerini değiştirmek, tuvalinizin boyutunu her zaman değiştirebileceğiniz bir yöntemdir, ancak daha sonra her şeyi yeniden boyamanız gerekir, bu da zaman alır ve her zaman gerekli değildir, çünkü başarabileceğiniz bir miktar boyut değişikliği css öznitelikleri aracılığıyla, bu durumda tuvali yeniden çizmezsiniz.

Pencere yeniden boyutlandırmasında olmasını isteyebileceğiniz 4 durum görüyorum (tümü tam ekran tuval ile başlıyor)

1: genişliğin% 100 kalmasını ve en boy oranının olduğu gibi kalmasını istiyorsunuz. Bu durumda, tuvali yeniden çizmenize gerek yoktur; bir pencere yeniden boyutlandırma işleyicisine bile ihtiyacınız yoktur. Tum ihtiyacin olan sey

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

Burada ctx tuval ortamınızdır. keman: resize

2: genişlik ve yüksekliğin her ikisinin de% 100 kalmasını istiyorsunuz ve en boy oranındaki değişimin, uzatılmış bir görüntü efekti olmasını istiyorsunuz. Şimdi, tuvali yeniden çizmeniz gerekmiyor, ancak bir pencere yeniden boyutlandırma işleyicisine ihtiyacınız var. İşleyicide,

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

keman: messWithAspectratio

3: genişlik ve yüksekliğin% 100 kalmasını istiyorsunuz, ancak en boy oranındaki değişimin cevabı görüntüyü uzatmaktan farklı bir şey. Sonra yeniden çizmeniz ve kabul edilen cevapta özetlenen şekilde yapmanız gerekir.

keman: redraw

4: genişlik ve yüksekliğin sayfa yükünde% 100 olmasını istiyorsunuz, ancak daha sonra sabit kalın (pencere yeniden boyutlandırmasına tepki yok).

keman: sabit

Modun ayarlandığı satır 63 dışındaki tüm kemanlar aynı koda sahiptir. Yerel makinenizde çalıştırmak için keman kodunu da kopyalayabilirsiniz; bu durumda, modu bir sorgu dizesi bağımsız değişkeni ile? Mode = redraw olarak seçebilirsiniz.

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

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

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

</body>
</html>

CSS ile

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

Ben de bu sorunun cevabını bulmak istiyordum ama kabul edilen cevap benim için kırılıyordu. Görünüşe göre window.innerWidth kullanmak taşınabilir değil. Bazı tarayıcılarda çalışıyor, ancak Firefox'un beğenmediğini fark ettim.

Gregg Tavares, bu sorunu doğrudan ele alan harika bir kaynak yayınladı: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Bkz. Anti-desen # 3 ve 4).

Window.innerWidth yerine canvas.clientWidth kullanımı iyi çalışıyor.

İşte Gregg'in önerilen render döngüsü:

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

(動靜 能量 cevabını genişleterek)

Tuvali vücudu doldurmak için şekillendirin. Tuval üzerine render yaparken boyutunu dikkate alı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();

Cep telefonları için kullanmak daha iyidir

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

Bu orientation.The “görünüm” değiştirdikten sonra hatalı gösterecektir, çünkü portrait.See tam yönünü değiştirirken artırılacaktır örneğin