ملاحظات دراسة القماش: تنفيذ أساسيات القماش ثنائية الأبعاد

<canvas> هو عنصر HTML يمكن رسمه باستخدام البرامج النصية (عادةً js)

< Canvas > تم تقديم WebKit لأول مرة بواسطة Apple وتم استخدامه في Dashboard وSafari لنظام التشغيل Mac OS X

اليوم، تدعمه جميع المتصفحات الرئيسية (IE9+، الإصدارات الأقل تحتاج إلى تقديم Explorer Canvas لدعمه)

يقوم العنصر <canvas> بإنشاء لوحة قماشية ذات حجم ثابت يمكن استخدام سياق العرض CanvasRenderContext2D لرسم المحتوى المراد عرضه ومعالجته.

للرسم على القماش، يجب عليك أولاً الحصول على سياق العرض CanvasRenderContext2D2d. (يشير هذا إلى ثنائي الأبعاد، ولا يتحدث عن webgl)

 const Canvas = document.getElementById('mycanvas'); const ctx = Canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);

مثال

يمكنك تحديد نمط الرسم عن طريق تعيين خصائص السياق.

جميع الخصائص هي كما يلي:

يجب تحديد عرض اللوحة القماشية وارتفاعها باستخدام قيمتي العرض والارتفاع.

إذا لم يتم تحديده، فإن الحجم الافتراضي للوحة القماشية هو 300×150

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

 قماش {العرض: 1000px;الارتفاع: 600px;<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = red;ctx.fillRect(10, 10, 100، 100)؛

لماذا يتم تعيين الأنماط على نفس الحجم ولكن يتم عرضها بشكل مختلف تمامًا؟

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

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.