مثال على رسم تأثير الكرة العائمة على القماش

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

التأثير الأصلي

تحقيق التأثير

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

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

انظر جيثب الريبو هنا .

تعليمات الرسم في Canvas تشبه إلى حد كبير التعليمات الموجودة في SVG، وهي بسيطة جدًا.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

يبدأ المسار beginPath، ويرسم قوسًا دائرة، ويملأها بالألوان.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.stroke();

وبالمثل، يبدأ beginPath مسارًا، ويحرك MoveTo الفرشاة إلى نقطة البداية، ويرسم LineTo الخط إلى نقطة النهاية، ويرسم حدودًا.

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

 var Canvas = document.getElementById(canvas); function resizeCanvas() { Canvas.width = window.innerWidth;

الرسوم المتحركة الأساسية تجعلني أبدأ.

أربع خطوات لإنشاء الرسوم المتحركة:

1. امسح محتوى اللوحة، عادةً باستخدام ClearRect()
2. حفظ حالة اللوحة القماشية
3. رسم المحتوى
4. إعادة ضبط حالة اللوحة القماشية

ما فعلته بسيط نسبيًا، فقط باستخدام 1 و3، وهو مسح اللوحة القماشية باستمرار ثم إعادة رسمها.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, Canvas.width, Canvas.height);} function draw() { cleanCanvas ()؛ // رسم المواد window.requestAnimationFrame(draw);}

ثلاثة متاحة:

1. window.setInterval() إذا لم تكن هناك حاجة لتفاعل المستخدم على الإطلاق ومجرد إعادة الرسم المستمر، فهذا يكفي.
2. window.setTimeout() إذا كنت تريد أن تؤثر عمليات المستخدم، مثل لوحة المفاتيح والماوس، على الرسوم المتحركة، فيمكنك استخدام هذا (لا أفهم، أليس requestAnimationFrame أفضل؟)
3. يخبر window.requestAnimationFrame() المتصفح بما يجب فعله قبل إعادة الرسم في المرة القادمة، أي عملية الرسم المخصصة الخاصة بك.

هذا المثال في MDN رائع جدًا ويمكن نقله، وما يلي هو مجرد لقطة شاشة.

لقد رأيت بعض عمليات تطوير محرك اللعبة من قبل، وقمت بوعي بعمل تغليف موجه للكائنات، وما يتم استخدامه هنا بسيط للغاية.

الأمر الأساسي هو أن المتجه يمثل نقطة/متجه في فضاء ثنائي الأبعاد، وأعضاؤه هم x وy فقط.

وعلى هذا الأساس، تمثل الدائرة دائرة، ومركز العضو: يمثل المتجه مركز الدائرة، ونصف القطر: الرقم يمثل نصف القطر، والسرعة: يمثل المتجه السرعة.

ثم قم بتغليف بعض وظائف الأعضاء لاستخدامك الخاص.

إن TypeScript + Webpack + Webpack-dev-server ليس معقدًا، ما عليك سوى الرجوع إلى المحتوى التالي:

1. Webpack/الشروع في العمل
2. Webpack/Typescript
3. حزمة الويب/devServer
4. webpack-dev-server

بالإضافة إلى ذلك، جربت أيضًا npx، والذي يُستخدم لتشغيل برامج npm القابلة للتنفيذ. في الماضي، تم تثبيت webpack عالميًا، ويمكنك فقط الاتصال بـ webpack xx مباشرة إذا قمت بتثبيت webpack محليًا، فستحتاج إلى المرور عبر ./node_modules/. .bin/webpack لتشغيل حزمة الويب المحلية، يمكنك الآن استخدام npx webpack xxx.

في تكوين devServer، أضفت hot: true لتمكين التحديث السريع، ونتيجة لذلك، طلبت صفحة الويب ما يلي: [HMR] تم تعطيل استبدال الوحدة الساخنة.

لقد وجدت أنه مأزق قديم عندما أحتاج إلى الاتصال به، أضف معلمات سطر الأوامر: webpack-dev-server --hot --inline

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