إذا كنت تدرس الويب مؤخرًا ، لكنك تمكنت بالفعل من رؤية العديد من التأثيرات الجميلة على الموقع ، مثل نظام الجسيمات أو بعض الألعاب المطورة على قماش ، فقد كنت مفتونًا ، ولكن من المخيف جدًا أن تتعلم شيئًا جديدًا ، فأنا مستعد للتوضيح لك كما هو الحال في 50 سطرًا من كود js ، يمكنك القيام بشيء مثير للاهتمام على canvas'e.
سأقول على الفور ، أريد أن أشرح منطق العمل مع قماش. الكود بسيط للغاية ، وآمل أن يشجعك ذلك على تعلم أدوات مثل قماش. هذه أيضًا ممارسة جيدة جدًا لمبرمج JS للمبتدئين.
دعنا ننتقل إلى الرمز. دعنا نكتب جيل بسيط من المربعات من ألوان مختلفة على القماش. يمكنك رؤية الشفرة بأكملها مرة واحدة ، ثم سأشرحها.
ماذا نحتاج أن نفعل؟
- احصل على اللوحة القماشية وسياقها ثنائي الأبعاد (إذا لم تقم بذلك من قبل ، فلا تقلق ، فهذا يجعل سطرين من الكود)
- دعونا نجعل قماشنا متكيف قليلاً
- اضبط المتغيرات والخصائص التي نحتاجها
- رسم عنصر على قماش
- عند تغيير الحجم ، قم بتغيير حجم اللوحة القماشية
يمكن تقسيم العمل في قماش إلى 3 مراحل.
- تحديد الخصائص التي نحتاجها (سمك القلم ، لون التعبئة ، لون الخط ، وغيرها من الخصائص)
- ارسم عنصرا
- إذا فعلنا شيء ديناميكي. على سبيل المثال ، لعبة ، رسوم متحركة ، نظام من الجزيئات وعناصر أخرى ، ثم نقوم بإنشاء دورة وإسقاط (تقديم) كائناتنا فيه
حسنا ، العودة إلى رمز لدينا.
1. كما قلت ، سطرين من التعليمات البرمجية ويمكننا معالجة قماش
الحصول على عنصر بواسطة Id هو واجهة برمجة التطبيقات للمستعرض القياسي ، ولكن getContext هي طريقة للوحة القماشية نفسها. يمكنك الحصول على سياق ثلاثي الأبعاد ، لكننا لسنا بحاجة إليه في الوقت الحالي.
2. النقطة الثانية ، الثالثة والخامسة سوف اتحد ل يتم الإعلان عن المتغيرات + الكود هو نفسه هنا. يمكنك حتى جعل وظيفة منفصلة منذ ذلك الحين كود الازدواجية جار بالفعل ، وهو أمر سيء.
سنحتاج إلى مزيد من متغيرات العرض والارتفاع ، ولا تنس أيضًا استدعاء وظيفة ReSize بعد تلقي سياق اللوحة.
نحن بحاجة إلى كائن خيارات أخرى. في ذلك سوف نقوم بتخزين جميع الإعدادات.
العتامة - السرعة التي سيتم بها الكتابة فوق عناصرنا على قماش
حساب - عدد المكعبات التي سنقوم بإنشائها في تشغيل واحد من الدالة
إطارا في الثانية - أعتقد أنه ليست هناك حاجة لشرح سبب ... الحقيقة غريبة ...
اللون - هنا يكمن القناع الذي يمثل لوحة الألوان لدينا
تدرج اللون في نغمة من 0 إلى 360. ستكون الصورة أكثر وضوحًا
divisionSpeed هو متغير يمكننا من خلاله ضبط معدل تغيير اللون
4. كل ما تبقى لنا هو إنشاء حلقة ، وظيفة للتقديم ، وتسمية كل شيء.
نحن إنشاء وظيفة التهيئة ، هناك حاجة لتهيئة الحلقة. تحتوي النافذة على طريقة requestAniimationFrame () كبيرة تتيح لك تكرار الاتصال بالوظيفة التي نحتاجها. وأيضًا داخل Init ، نسمي الدالة Step () التي يتم تخزين رمز تقديم مكعباتنا بها.
سنفعل في حلقة لاستخلاص 100 عنصر في وقت واحد. داخل الدورة ، أول شيء نفعله هو وضع شرط يسمح لنا باختيار لون لوني في النطاق من 0 إلى 360 ، وبالتالي فإن ألوان مكعباتنا ستتغير. يمكن دمج الخطين اللاحقين في واحد ، وبالتالي تحديد لون تعبئة الشكل مباشرة. يسمح لك ctx.fillStyle بتعيين لون التعبئة ، ويتيح لك ctx.fillRect (النقطة x ، النقطة y ، العرض ، الارتفاع) رسم شكل. وضعنا ارتفاعًا عشوائيًا بعرض ، ولكن في نطاق أحجامنا.
سطرين بعد الحلقة ، وهذا هو لمسح الشاشة. أنت تعلم بالفعل أن fillstyle يسمح لك بتعيين لون التعبئة ، فنحن نضبط اللون الأبيض مع العتامة مساوٍ للعتامة من كائن الخيارات. ونبدأ أيضًا في رسم شخصية التطهير من 0: 0 بأبعاد تساوي أحجام قماشنا.
يمكننا فقط استدعاء الدالة Init في أي مكان في برنامجنا.
إذا كنت لا تزال تشك في أنه يمكنك القيام بأشياء جميلة باستخدام قماش ، هنا مثال واحد.
إذا كنت مهتمًا بالقماش ، فقد حان الوقت لمواصلة دراسة هذه التقنية. لا أستطيع أن أنصحك بشأن مقالة دراسة جيدة. كان من الممل جدًا بالنسبة لي أن أقرأ عن قماش ، ولم أكن أحفظ أي شيء جيد بالنسبة لي. وعلى موقع youtube ، يوجد عدد قليل جدًا من مقاطع الفيديو الجيدة على القماش ، وتلك التي يمكن مشاهدتها تحتوي فقط على 10٪ من المعلومات الضرورية و 30٪ من المياه ، والباقي من الوقت الذي يكتبون فيه رمزًا به أخطاء ويصممونه أثناء التنقل. في رأيي ، أفضل شيء هو أخذ مثال بسيط ومحاولة تنفيذه بنفسك.