HTML5 Canvas ارتفاع عرض 100 ٪ من إيماءة العرض؟

Question

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

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

Answer 1

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

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

لغة البرمجة

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

Answer 2

يمكنك المحاولة وحدات المنفذ (CSS3):

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

Answer 3

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

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

أهم شيء يجب أن تكون واضحًا بشأنه: يحتوي كائن HTML Canvas على سمة عرض وسمة ارتفاع ؛ وبعد ذلك ، فإن CSS من نفس الكائن له أيضًا عرض وسمة الارتفاع. هذين العروض والارتفاعات مختلفة ، وكلاهما مفيد لأشياء مختلفة.

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

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

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

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

حيث CTX هو سياق القماش الخاص بك. كمان: تغيير حجمها

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

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

كمان: messwithaspectratio

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

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

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

كمان: مُثَبَّت

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

Answer 4

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

نشر Gregg Tavares مورد رائع هنا يعالج هذه المشكلة مباشرة:http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html(انظر anti-pattern #s 3 و 4).

باستخدام canvas.clientwidth بدلاً من window.innerwidth يبدو أنه يعمل بشكل جيد.

إليكم حلقة عرض جريج المقترحة:

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

Answer 5

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
   }

Answer 6

(التوسع عند إجابة 動靜)

نمط القماش لملء الجسم. عند تقديم القماش يأخذ حجمه في الاعتبار.

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