تنظيم بعض الميزات الجديدة لـ HTML5 والخصائص المشتركة للقماش

تقدم هذه المقالة بشكل أساسي بعض الميزات الجديدة لـ HTML5 وفرز الخصائص الشائعة للقماش. API Canvas هو محتوى مهم يستخدم في HTML5 لرسم الرسومات. يمكن للأصدقاء الذين يحتاجون إليها الإشارة إلى 1. أنواع محتوى HTML5

تَلمِيح

API المحددات ليست مريحة فقط. عندما يتعلق الأمر باجتياز DOM ، عادة ما تكون واجهة برمجة تطبيقات Selectors أسرع من واجهة برمجة تطبيقات Node Search السابقة. لتنفيذ ورقة أنماط سريعة ، يعمل المتصفح على تحسين مطابقة المحدد.

Canvas هي أساسا قماشية نقطية ، حيث لا تكون الرسومات المرسومة عليها قابلة للتطوير ولا يمكن توسيعها وتقليلها مثل صورة SVG. بالإضافة إلى ذلك ، لا تنتمي الكائنات المرسومة باستخدام قماش إلى بنية DOM للصفحة أو أي مساحة اسم.

البرمجة مع قماش ، يجب عليك أولاً الحصول على سياقها. ثم قم بتنفيذ الإجراءات في السياق وتطبيق هذه الإجراءات أخيرًا على السياق.

تبدأ الإحداثيات في القماش من الزاوية اليسرى العلوية ، ويمتد المحور السيني إلى اليمين في الاتجاه الأفقي (بواسطة البكسل) ويمتد المحور ص إلى أسفل في الاتجاه العمودي. تسمى النقطة مع إحداثيات الزاوية اليسرى العليا X = 0 و Y-0 الأصل.

مثل معظم عناصر HTML ، يمكن لعنصر القماش أيضًا إضافة حدود عن طريق تطبيق CSS ، وضبط الهوامش الداخلية ، والهوامش الخارجية ، وما إلى ذلك ، ويمكن أيضًا أن تترث بعض سمات CSS بواسطة عناصر في القماش.

تصحيح - في نظام الرسم ، يمكن تطبيق العبارة - يمكن تطبيقها بالتتابع ، أو تم دمجها أو تعديلها عند تطبيقها. يجب تصحيح نتائج كل عملية رسم من خلال طبقة التصحيح قبل عرضها على قماش. على الرغم من أن هذا يضيف تعقيدًا إضافيًا ، إلا أنه يضيف ميزات أكثر قوة إلى نظام الرسم ، والذي قد يدعم معالجة الصور في الوقت الفعلي مثل أدوات تحرير الصور الرئيسية الحالية ، وبالتالي فإن تعقيد هذا الجزء من المحتوى في واجهة برمجة التطبيقات ضروري.

هناك اقتراح مهم حول التعليمات البرمجية القابلة لإعادة الاستخدام: بشكل عام ، يجب أن يبدأ الرسم من الأصل (0،0 نقطة في نظام الإحداثيات) ، وتطبيق التحول (التحجيم ، والترجمة ، والدوران ، وما إلى ذلك) ، ثم تعديل الكود باستمرار حتى يتم تحقيق التأثير المطلوب.

وظيفة مسار السياق

(1) Moveto (x ، y): لا يرسم ، ما عليك سوى نقل الموضع الحالي إلى إحداثيات الوجهة الجديدة (x ، y) ؛

(2) Lineto (x ، y): لا ينقل الموضع الحالي إلى الإحداثيات الهدف الجديدة فقط (x ، y) ، ولكن أيضًا يرسم خطًا مستقيمًا بين الإحداثيين.

(3) Closepath (): سلوك هذه الوظيفة يشبه إلى حد كبير lineto. الفرق الوحيد هو أن ClosePaht سيستخدم تلقائيًا إحداثيات البداية للمسار كإحداثي الهدف. يُبلغ ClosePath أيضًا القماش بأن الرقم المرسوم حاليًا قد تم إغلاقه أو شكل مساحة مغلقة تمامًا ، وهو أمر مفيد جدًا للملفات والسكتات الدماغية المستقبلية.

(4) strokerect (): ارسم الخطوط العريضة للمستطيل بناءً على الموضع المعطى والإحداثيات.

(5) CLARRECT (): قم بمسح جميع المحتوى في منطقة المستطيل واستعادته إلى حالته الأولية ، أي لون شفاف.

(6) QuadraticCurveto (): نقطة انطلاق الدالة التي ترسم منحنى هي الإحداثيات الحالية ، مع مجموعتين من حواف (x ، y). المجموعة الثانية تشير إلى نقطة نهاية المنحنى. تمثل المجموعة الأولى نقاط التحكم. تقع نقطة التحكم المزعومة بجوار المنحنى (وليس فوق المنحنى) ، وتأثيره يعادل إنشاء قوة توتر على المنحنى. عن طريق ضبط موضع نقطة التحكم ، يمكن تغيير انحناء المنحنى.

تزيد الصور من تعقيد عمليات القماش: يجب أن تنتظر حتى يتم تحميل الصورة بالكامل قبل تشغيلها. عادةً ما يقوم المتصفحات بتحميل الصور بشكل غير متزامن أثناء تنفيذ البرنامج النصي للصفحة. إذا قامت العرض بإعداد الصورة على القماش قبل تحميلها بالكامل ، فلن يعرض اللوحة أي صور.

يشير التدرج إلى استخدام خوارزميات أخذ العينات التدريجية على مجموعات الألوان وتطبيق النتائج على أنماط السكتة الدماغية وملء أنماط.

يتطلب استخدام التدرجات ثلاث خطوات:

(1) إنشاء كائن التدرج ؛

(2) تعيين لون للكائنات التدرج والإشارة إلى طريقة الانتقال ؛

(3) تعيين التدرجات لأنماط التعبئة أو أنماط السكتة الدماغية على السياق.

لتعيين أي لون لعرضه ، استخدم وظيفة AddColorStop على كائن التدرج. تتيح هذه الوظيفة تحديد معلمتين: اللون والإزاحة. معلمات الألوان هي الألوان التي يريد المطورون استخدامها عند ضربها أو ملؤها في مواقع الإزاحة. الإزاحة هي قيمة بين 0.0 و 1.0 ، تمثل المدى الذي يتم تغيير المسافة على طول خط التدرج.

بالإضافة إلى التدرجات الخطية ، تدعم API HTML5 Canvas أيضًا التدرجات المشعة. يعني التدرج المشع المزعوم أن اللون يتغير بسلاسة في المنطقة المخروطية بين دائرتين محددين. نقاط إنهاء الألوان المستخدمة للتدرجات المشعة والتدرجات الخطية هي نفسها.