it-swarm.asia

HTML5 قماش 100 ٪ ارتفاع العرض من Viewport؟

أحاول إنشاء عنصر قماش يشغل 100٪ من عرض وطول إطار العرض.

يمكنك أن ترى في مثالي هنا الذي يحدث ، ومع ذلك فهو يضيف أشرطة التمرير في كل من Chrome و FireFox. كيف يمكنني منع أشرطة التمرير الإضافية وتوفير العرض والارتفاع للإطار بالضبط ليكون حجم اللوحة القماشية؟

131
aherrick

من أجل جعل عرض ملء الشاشة بالارتفاع وعرضها دائمًا ، وهذا يعني حتى عند تغيير حجم المستعرض ، فأنت بحاجة إلى تشغيل حلقة السحب الخاصة بك داخل دالة تعمل على تغيير حجم اللوحة القماشية إلى النافذة.

مثال: http://jsfiddle.net/jaredwilli/qFuDr/

HTML

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

جافا سكريبت

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

هذه هي الطريقة التي تجعل من قماش العرض والعرض الكامل للمتصفح بشكل صحيح. يجب عليك فقط وضع كافة التعليمات البرمجية للرسم على اللوحة القماشية في دالة drawStuff ().

238
jaredwilli

يمكنك تجربة وحدات viewport (CSS3):

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

سأجيب عن السؤال الأكثر عمومية حول كيفية تعديل حجم اللوحة بشكل ديناميكي عند تغيير حجم النافذة. الإجابة المقبولة تتعامل بشكل مناسب مع الحالة التي يفترض فيها أن يكون كل من العرض والارتفاع 100٪ ، وهو ما تم طلبه ، ولكنه أيضًا سيغير نسبة العرض إلى الارتفاع للوحة القماشية. سيريد العديد من المستخدمين تغيير حجم اللوحة القماشية على تغيير حجم النافذة ، ولكن مع إبقاء نسبة العرض إلى الارتفاع دون تغيير. إنه ليس السؤال الدقيق ، لكنه "يناسب" ، فقط ضع السؤال في سياق أكثر عمومية قليلاً.

سيكون للنافذة بعض نسبة العرض إلى الارتفاع (العرض/الارتفاع) ، وكذلك كائن اللوحة القماشية. كيف تريد أن ترتبط هاتان النسبتان الجانبيتان ببعضهما البعض هو شيء يجب عليك أن تكون واضحًا بشأنه ، ليس هناك إجابة "مقاس واحد يناسب الجميع" على هذا السؤال - سوف أتطرق إلى بعض الحالات الشائعة لما قد تكون عليه تريد.

الشيء الأكثر أهمية الذي يجب أن تكون واضحًا بشأنه: يحتوي كائن html canvas على سمة عرض وسمة ارتفاع ؛ ثم ، يحتوي css الخاص بالكائن نفسه أيضًا على عرض وسمة ارتفاع. هذان العرضان والارتفاع مختلفان ، وكلاهما مفيد لأشياء مختلفة.

يعد تغيير سمات العرض والارتفاع أحد الأساليب التي يمكنك من خلالها دائمًا تغيير حجم اللوحة القماشية الخاصة بك ، ولكن بعد ذلك سيتعين عليك إعادة طلاء كل شيء ، والذي سيستغرق وقتًا وليس ضروريًا دائمًا ، لأن قدرًا من التغيير في الحجم يمكنك إنجازه عبر سمات المغلق ، وفي هذه الحالة لا تعيد رسم اللوحة القماشية.

أرى 4 حالات لما قد ترغب في حدوثه في تغيير حجم النافذة (جميعها تبدأ بقماش ملء الشاشة)

1: تريد أن يظل العرض 100٪ ، وتريد أن تظل نسبة العرض إلى الارتفاع كما هي. في هذه الحالة ، لا تحتاج إلى إعادة رسم اللوحة القماشية ؛ أنت لا تحتاج حتى معالج تغيير حجم النافذة. كل ما تحتاجه هو

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

حيث ctx هو سياق قماشك. كمان: resizeByWidth

2: تريد أن يبقى كل من العرض والارتفاع 100٪ ، وتريد أن يكون للتغيير الناتج في نسبة العرض إلى الارتفاع تأثير صورة ممتدة. الآن ، ما زلت لا تحتاج إلى إعادة رسم اللوحة القماشية ، لكنك بحاجة إلى معالج تغيير حجم النافذة. في المعالج ، أنت تفعل

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

كمان: messWithAspectratio

3: تريد أن يبقى كل من العرض والارتفاع 100٪ ، لكن الإجابة على التغيير في نسبة العرض إلى الارتفاع شيء مختلف عن تمديد الصورة. ثم تحتاج إلى إعادة رسم ، والقيام بذلك بالطريقة الموضحة في الإجابة المقبولة.

كمان: إعادة رسم

4: أنت تريد أن يكون العرض والارتفاع 100٪ عند تحميل الصفحة ، لكن تبقى ثابتًا بعد ذلك (لا يوجد رد فعل لتغيير حجم النافذة.

كمان: ثابت

جميع الكمانات لها كود متطابق ، باستثناء السطر 63 حيث تم ضبط الوضع. يمكنك أيضًا نسخ رمز الكمان لتشغيله على جهازك المحلي ، وفي هذه الحالة يمكنك تحديد الوضع عبر وسيطة querystring ، مثل؟ mode = redraw

14
mathheadinclouds

كنت أبحث للعثور على إجابة لهذا السؤال أيضًا ، ولكن الإجابة المقبولة كانت بالنسبة لي. يبدو أن استخدام window.innerWidth ليس محمولًا. إنه يعمل في بعض المتصفحات ، لكنني لاحظت أن Firefox لم يعجبه.

نشر جريج تافاريس موردا رائعا هنا يعالج هذه المشكلة مباشرة: 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();
8
David

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
   }
7
太極者無極而生

(التوسع في إجابة) 能量)

نمط قماش لملء الجسم. عند التقديم للوحة القماشية ، يجب مراعاة حجمها.

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
   }

جافا سكريبت:

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();
2
Vincent Scheib