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); }); `