1.8 KiB
title | localeTitle |
---|---|
Canvas Dimensions | أبعاد قماش |
أبعاد قماش
تتحكم خصائص width
height
في حجم اللوحة. تتحكم هذه السمات في حجم الرسم القماشي ، وليس الحجم المعروض الفعلي.
شاهد الأبعاد التجريبية لـ Pen Canvas بواسطة Alan Luo ( alanluo ) على CodePen .
في القلم أعلاه ، تحتوي كل من عناصر canvas
على نفس الأبعاد المحددة من خلال CSS. ومع ذلك ، يوجد لدى المرتين ضعف الارتفاع الذي تم ضبطه من خلال سمة height
، مما يؤدي إلى جعل نفس المستطيل نفسه يصبح نصف الطول.
يمكن أن يسبب ذلك مشاكل عند الرغبة في إنشاء لوحة بحجم ديناميكي. بالنسبة إلى instnace ، قد تحتاج إلى إنشاء لوحة ملء الشاشة ، أو استخدام لوحة رسومات كصورة مصغرة.
لجعل حجم سياق الرسم يتطابق مع الحجم المعروض لعنصر canvas
، يتعين علينا فرض هذا في الوقت الفعلي. إحدى الممارسات الشائعة هي وضع المعالج التالي في onResize
إصغاء onResize
.
`// somewhere early in the script var canvas = document.getElementById("canvas"); ...
window.addEventListener("resize", function() { canvas.setAttribute("width", canvas.scrollWidth); canvas.setAttribute("height", canvas.scrollHeight); console.log(canvas.offsetWidth); }); `