نموذج التعليمات البرمجية للدالة المثلثية القماشية لمحاكاة تأثير موجة الماء

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

التعبير عن وظيفة الخطيئة هو كما يلي،

y=Asin（wx+φ）+h

من بينها، A يمثل السعة، ω يمثل التردد الزاوي (ω=2π/T، T هي فترة الوظيفة)، φ يمثل المرحلة الأولية، وh يمثل طول ترجمة الصورة في الاتجاه الإيجابي ل المحور y (تجدر الإشارة هنا إلى أن h في الرياضيات تعني في الأصل ترجمة تصاعدية، ولكن يتم استخدام نظام إحداثيات الشاشة في اللوحة القماشية، أي أن الزاوية اليسرى العليا هي الأصل، وh تعني ترجمة تنازلية)؛

رمز الرسم هو كما يلي:

(1) أضف علامة قماش

 <معرف القماش=canvas></canvas>

(2) أضف نمط CSS وضبط عرض اللوحة القماشية وارتفاعها

 html,body { الحشو: 0; العرض: 100%; الارتفاع: 100%;} القماش { العرض: 100%; الارتفاع: 100%;

(3) رسم صورة الوظيفة

 var Canvas = document.getElementById(canvas)، ctx = Canvas.getContext('2d')، width = Canvas.width = Canvas.offsetWidth، height = Canvas.height = Canvas.offsetHeight;// إعلان المعلمات var A=50, W=1/50, Q=0, H= الارتفاع / 2;// طريقة الرسم (function draw(){ ctx.clearRect(0, 0, width, height);// امسح اللوحة القماشية ctx.beginPath(); // مسار البدء ctx.strokeStyle=#000; // تعيين لون الخط ctx.lineWidth = 1; // تعيين عرض الخط ctx.moveTo(0, height /2) ; // موضع نقطة البداية for (let x = 0; x <= width; x++) {// ارسم متغير x المقابل لـ y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); // ارسم المسار ctx.ClosePath(); // أغلق المسار})()

بهذه الطريقة نحصل على الصورة التالية:

ما تم الحصول عليه أعلاه هو صورة دالة ثابتة، والأشكال الموجية أو موجات الماء التي نراها بشكل عام تتغير باستمرار مع مرور الوقت. هنا نحتاج إلى استخدام مرحلة المعلمة φ في الخطوة السابقة، (js هي Q في الكود)، يمكننا ذلك بشكل مستمر. قم بزيادة أو تقليل φ بمرور الوقت للحصول على صور مختلفة في أوقات مختلفة؛ استخدم window.requestAnimationFrame لتنفيذ الرسوم المتحركة للإطار؛

قم بتعديل الكود أعلاه إلى:

 var Canvas = document.getElementById(canvas)، ctx = Canvas.getContext('2d')، width = Canvas.width = Canvas.offsetWidth، height = Canvas.height = Canvas.offsetHeight;// إعلان المعلمات var A=50, W=1/50, Q=0, H= الارتفاع / 2;// طريقة الرسم (function draw(){ ctx.clearRect(0, 0, width, height);// امسح اللوحة القماشية ctx.beginPath(); // مسار البدء ctx.strokeStyle=#000; // تعيين لون الخط ctx.lineWidth = 1; // تعيين عرض الخط ctx.moveTo(0, height /2) ; // موضع نقطة البداية for (let x = 0; x <= width; x++) {// ارسم متغير x المقابل لـ y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx.stroke(); // ارسم المسار ctx.ClosePath(); // أغلق المسار})()

التأثير كما يلي (برنامج لقطة شاشة Zhazha):

على الرغم من أن المسار أعلاه مغلق، إلا أنه لا يلبي الجزء الذي نحتاج إلى ملئه، ويكون تأثير التعبئة المباشرة كما يلي:

يجب أن يبدو المسار المملوء بالكامل كما يلي:

بعد إغلاق المسار، قم بإنشاء لون متدرج ليكون لون التعبئة كما يلي:

 var lingrad = ctx.createLinearGradient(0,0,width,0); draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height(); ctx.strokeStyle=#000; ctx.fillStyle = ctx.lineWidth = 1; ctx.moveTo(0, height /2); =speed; for (let x = 0; x <= width; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); ctx.lineTo(width, height); .إغلاق المسار ()؛}) ()

التأثير هو كما يلي:

1. أولاً، يمكنك تركيب شكل موجة ذو تردد أعلى على شكل الموجة أعلاه لجعل شكل الموجة غير منتظم.

 var s = 0.1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;

2. أضف شكل موجة آخر مع تغيرات طورية مختلفة، ويكون ملئه المتدرج عكس اتجاه التدرج السابق لتشكيل تأثير ظل متداخل وضبط تأثير تداخل المسار globalCompositeOperation؛

 var Canvas = document.getElementById(canvas)، ctx = Canvas.getContext('2d')، width = Canvas.width = Canvas.offsetWidth، height = Canvas.height = Canvas.offsetHeight;var A=30, W=1 / 200، Q=0، H= الارتفاع / 2؛var A2=30، W2=1/300، Q2=0، H2= الارتفاع / 2;var speed=-0.01;var speed2=-0.02;var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop( 1، 'رغبا (111،224،195،1)')؛ var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');lingrad2.addColorStop(1, 'rgba(0,186,128,0.8)'); draw(){ window.requestAnimationFrame(draw); ctx.clearRect(0, 0, width, height); ctx.fillStyle = lingrad; = 0; x <= width; x++) { var s = 0.1*Math.sin(x/150)+1; A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); .fill(); ctx. ClosePath() // تعيين تأثير التداخل ctx.globalCompositeOperation = Destination-over // ارسم شكل الموجة الثاني ctx.beginPath(); ctx.fillStyle = lingrad2; } ctx.lineTo(width,height); ctx.ClosePath();})()

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