1.8 KiB
| title | localeTitle |
|---|---|
| Basic Usage | الاستخدام الأساسي |
الاستخدام الأساسي من قماش
عند استخدام لوحة الرسم القماشية ، ضع لوحة قماشية أولاً في المستند كعنصر.
<canvas width="400" height="400" id="canvas"></canvas>
تتحكم خصائص width height في حجم اللوحة. تتحكم هذه السمات في حجم الرسم القماشي ، وليس الحجم المعروض الفعلي. راجع صفحة "أبعاد Canvas" لمزيد من المعلومات.
لاستخدام canvas رسم ، يجب أولاً أن نأخذ العنصر من الصفحة كعنصر DOM ، ثم نحصل على سياق رسم منه.
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d');
سيتم إجراء جميع مكالمات الرسم بعد ذلك من كائن ctx . يمثل ctx سياق الرسم للكائن ، ويحتوي على معلومات حول مساحة الرسم ثنائية الأبعاد. كائن canvas هو عنصر DOM الفعلي. يسمح لنا التفاعل معها بالوصول إلى سمات مثل width height .
هناك عدد قليل من سياقات الرسم المتاحة ، بما في ذلك webgl . تعد تقنية WebGL تقنية مختلفة تمامًا ، لذلك سنركز فقط على الرسم ثنائي الأبعاد.
مسارات هي لبنة بناء في رسم canvas . راجع صفحة " المسارات " لمعرفة المزيد.