تعليق: ما هو قماش <canvas> هو عنصر HTML جديد يتم تعريفه في HTML5. يمكن عادةً استخدام هذا العنصر لرسم الرسومات ، وتوليف الصور ، وما إلى ذلك. في صفحات HTML من خلال JavaScript ، ويمكن استخدامها أيضًا لصنع بعض الرسوم المتحركة. بالطبع ، حاليا HTML5
ما هو قماش
<Canvas> هو عنصر HTML جديد يتم تعريفه في HTML5. يمكن عادةً استخدام هذا العنصر لرسم الرسومات ، وتوليف الصور ، وما إلى ذلك. في صفحات HTML من خلال JavaScript ، ويمكن استخدامها أيضًا لصنع بعض الرسوم المتحركة. بطبيعة الحال ، لا تزال مواصفات HTML5 في مرحلة المسودة ، وقد يستغرق الأمر حتى عام 2010 لإصداره رسميًا ، ولكن الآن العديد من المتصفحات قد دعمت بالفعل بعض مواصفات HTML5. حاليًا ، تشمل المستعرضات التي تدعم عناصر قماش Firefox3+، Safari4 ، Chrome 2.0+ ، وما إلى ذلك ، لذلك عند تشغيل الأمثلة على هذه الصفحة ، يرجى التأكد من أنك تستخدم أحد المتصفحات المذكورة أعلاه.
على الرغم من أنني حصلت على الكثير من البرامج التعليمية على قماش في موزيلا ، إلا أنني قررت تسجيل عملية التعلم الخاصة بي. إذا كنت تعتقد أنني لا أفهم ما يكفي ، فيمكنك العثور على رابط إلى البرنامج التعليمي على موقع Mozilla على موقع Mozilla في المواد المرجعية.
أيضا ، يمكن الاطلاع على بعض أمثلة القماش المثيرة للاهتمام هنا.
ابدأ مع قماش
استخدام قماش بسيط. تمامًا مثل استخدام عناصر HTML الأخرى ، تحتاج فقط إلى إضافة علامة <Canvas> إلى الصفحة:
<Canvas> </tanvas>
بالطبع ، هذا مجرد إنشاء بسيط لكائن قماش ولا يؤدي أي عملية عليها. في هذا الوقت ، لا يبدو عنصر القماش مختلفًا عن عنصر Div ، ولا يمكن رؤية أي شيء على الصفحة :)
بالإضافة إلى ذلك ، يمكن تحديد حجم عنصر القماش من خلال سمات العرض والارتفاع ، وهو ما يشبه إلى حد ما عنصر IMG.
قلب القماش: السياق
كما ذكرنا سابقًا ، يمكنك تشغيل كائنات قماش من خلال JavaScript لرسم الرسومات ، وصور التوليف ، وما إلى ذلك. لا يتم تنفيذ هذه العمليات من خلال كائن القماش نفسه ، ولكن يتم تنفيذها من خلال طريقة كائن Canvas إلى الحصول على Convas للحصول على سياق تشغيل القماش. بمعنى آخر ، في عملية استخدام كائن القماش ، نتعامل مع سياق كائن القماش ، ويمكن استخدام كائن القماش نفسه للحصول على معلومات مثل حجم كائن القماش.
من السهل جدًا الحصول على سياق كائن قماش. ما عليك سوى استدعاء طريقة getContext لعنصر القماش. عند الاتصال ، تحتاج إلى تمرير معلمة نوع السياق. القيمة الوحيدة التي يمكن استخدامها ويمكن استخدامها هي 2D:
Firefox3.0.x الحرج
على الرغم من أن Firefox3.0.x يدعم عناصر قماش ، إلا أنه لم يتم تنفيذه بالكامل وفقًا للمواصفات. يتم استبدال أساليب PillText و MeasuRetext في المواصفات بعدة طرق خاصة بـ Firefox في Firefox3.0.x. لذلك ، عند استخدام قماش في Firefox3.0.x ، تحتاج أولاً إلى إصلاح الاختلافات بين هذه الطرق في متصفحات مختلفة.
يتم أخذ الرمز التالي من مشروع Mozillabespin ، الذي يصحح التناقض بين كائن السياق من القماش في Firefox3.0.x ومواصفات HTML5:
ملاحظة: حتى Opera 9.5 ، لا تدعم Opera ملاءة كائن قماش وطرق وخصائصه ذات الصلة في مواصفات HTML5.
مرحبا ، قماش!
بعد بعض الفهم الأولي للقماش ، بدأنا في كتابة برنامج القماش الأول لدينا ، وهو فرع آخر من HelloWorld Hello الشهير ، قماش:
قم بتشغيل المثال ، المنطقة التي يوجد فيها كائن Canvas يظهر Hello ، World! ، وهي بالضبط وظيفة ctx.filltext (Hello ، World! ، 20،20) ؛ في الكود.
ملء وخصائص ذات صلة
يتم استخدام طريقة FillText لعرض النص في قماش. يمكن أن تقبل أربعة معلمات ، والآخر اختياري:
voidfilltext (IndomStringText ، infloatx ، infloaty ، [اختياري] infloatmaxwidth) ؛
حيث يمثل MaxWidth أقصى عرض عند عرض النص ، والذي يمكن أن يمنع النص من التفيض. ومع ذلك ، في اختباراتي ، وجدت أن MaxWidth غير فعال عند تحديد MaxWidth في Firefox و Chomre.
قبل استخدام طريقة FillText ، يمكنك ضبط خط النص عن طريق تعيين خاصية الخط للسياق. في المثال أعلاه ، استخدمت 20ptarial كخط النص. يمكنك تعيين قيم مختلفة بنفسك لترى التأثير المحدد.
ينهي
هذا كل شيء الآن. سأكتب هذه السلسلة أثناء قراءة المواصفات :)
مراجع
1. Canvas HTML5 ، مرحلة جديدة للغة البرمجة النصية ، HRED
2.
3. الصينية الصينية ، موزيلا
4.Canvastutorial English ، Mozilla
5.Canvassupportinopera ، أوبرا