โค้ดตัวอย่างสำหรับฟังก์ชันตรีโกณมิติแคนวาสเพื่อจำลองเอฟเฟกต์คลื่นน้ำ

ในโปรเจ็กต์ล่าสุด UI ได้ออกแบบแอนิเมชั่นพื้นหลังพร้อมเอฟเฟกต์คลื่นน้ำ อย่างไรก็ตาม ไม่มีแอนิเมชัน gif หรือ svg ฉันพยายามใช้ CSS เพื่อใช้งาน แต่เอฟเฟกต์แอนิเมชั่นไม่ค่อยดีนัก ฉันตรวจสอบทางออนไลน์แล้ว ใช้เส้นโค้ง Bezier เพื่อให้บรรลุเป้าหมาย ฉันคิดถึงแผนภาพรูปคลื่นต่างๆ ที่ฉันเคยเห็นมาก่อน ดังนั้นฉันจึงคิดเกี่ยวกับการจำลองสั้นๆ โดยใช้รูปภาพฟังก์ชันตรีโกณมิติ

การแสดงออกของฟังก์ชันบาปมีดังนี้

y=Asin（wx+φ）+h

ในบรรดาสิ่งเหล่านั้น A แสดงถึงแอมพลิจูด ω แสดงถึงความถี่เชิงมุม (ω=2π/T, T คือคาบของฟังก์ชัน), φ แสดงถึงเฟสเริ่มต้น และ h แสดงถึงความยาวของการแปลภาพในทิศทางบวกของ แกน y (ควรสังเกตที่นี่: h อยู่ในคณิตศาสตร์ แต่เดิมหมายถึงการแปลขึ้น แต่ใช้ระบบพิกัดหน้าจอบนผืนผ้าใบนั่นคือจุดเริ่มต้นที่มุมซ้ายบนและ h หมายถึงการแปลลง)

รหัสการวาดมีดังนี้:

(1) เพิ่มแท็กแคนวาส

 <canvas id=canvas></canvas>

(2) เพิ่มสไตล์ CSS และตั้งค่าความกว้างและความสูงของผ้าใบ

 html,body { ช่องว่างภายใน: 0; ระยะขอบ: 0; ความกว้าง: 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;//วิธีการวาด (ฟังก์ชั่นวาด(){ ctx.clearRect(0, 0, ความกว้าง, //ล้างผืนผ้าใบ ctx.beginPath(); //เริ่มต้นเส้นทาง ctx. strokeStyle=#000; //ตั้งค่าสีของเส้น ctx.lineWidth = 1; //ตั้งค่าความกว้างของเส้น ctx.moveTo(0, height /2) ; // ตำแหน่งจุดเริ่มต้นสำหรับ (ให้ x = 0; x <= width; x++) {// วาด var ของ 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;//วิธีการวาด (ฟังก์ชั่นวาด(){ ctx.clearRect(0, 0, ความกว้าง, //ล้างผืนผ้าใบ ctx.beginPath(); //เริ่มต้นเส้นทาง ctx. strokeStyle=#000; //ตั้งค่าสีของเส้น ctx.lineWidth = 1; //ตั้งค่าความกว้างของเส้น ctx.moveTo(0, height /2) ; // ตำแหน่งจุดเริ่มต้นสำหรับ (ให้ x = 0; x <= width; x++) {// วาด var ของ x ที่สอดคล้องกับ y = A*Math.sin(W*x+Q) +H ctx.lineTo(x, y) } ctx. stroke(); //วาดเส้นทาง ctx.closePath(); //ปิดเส้นทาง})()

เอฟเฟกต์มีดังนี้ (ซอฟต์แวร์จับภาพหน้าจอ Zhazha):

แม้ว่าเส้นทางข้างต้นจะปิด แต่ก็ไม่ตรงกับส่วนที่เราต้องเติม ผลกระทบของการเติมโดยตรงมีดังนี้:

เส้นทางที่เต็มไปควรมีลักษณะดังนี้:

หลังจากปิดเส้นทางแล้ว ให้สร้างสีไล่ระดับสีเป็นสีเติม รหัสจะเป็นดังนี้:

 var lingrad = ctx.createLinearGradient(0,0,ความกว้าง,0); lingrad.addColorStop(0, 'rgba(0,186,128,0.8)'); lingrad.addColorStop(1, 'rgba(111,224,195,1)'); วาด () { window.requestAnimationFrame (วาด); ctx.clearRect(0, 0, ความกว้าง, ความสูง); ctx.beginPath(); ctx. strokeStyle=#000; ctx.fillStyle = lingrad; =ความเร็ว; สำหรับ (ให้ x = 0; x <= ความกว้าง; x++) { var y = A*Math.sin(W*x+Q) +H; ctx.lineTo(x, y); } ctx.lineTo(ความกว้าง, ความสูง); .closePath();})()

ผลกระทบมีดังนี้:

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=-0.01;var speed2=-0.02;var lingrad = ctx.createLinearGradient(0,0,ความกว้าง,0);lingrad.addColorStop(0, 'rgba(0,186,128,0.8)');lingrad.addColorStop( 1, 'อาร์จีบีเอ(111,224,195,1)'); var lingrad2 = ctx.createLinearGradient(0,0,ความกว้าง,0);lingrad2.addColorStop(0,'rgba(111,224,195,1)');lingrad2.addColorStop(1, 'rgba(0,186,128,0.8)'); (function วาด () { window.requestAnimationFrame (วาด); ctx.clearRect(0, 0, ความกว้าง, ความสูง); ctx.beginPath(); ctx.fillStyle = lingrad; ctx.moveTo(0, ความสูง /2); // วาดรูปคลื่นแรก Q+=speed; = 0; x <= ความกว้าง; x++) { var s = 0.1*Math.sin(x/150)+1; A*Math.sin(W*x+Q) +H; y=y*s; ctx.lineTo(x, y); } ctx.lineTo(ความกว้าง, ความสูง); .fill(); ctx.closePath() //ตั้งค่าเอฟเฟกต์ที่ทับซ้อนกัน ctx.globalCompositeOperation = Destination-over //วาดรูปคลื่นที่สอง ctx.beginPath(); ctx.fillStyle = lingrad2; Q2+=speed2; for (let x = 0; x < width; x++) { var y = A2*Math.sin(x*W2+Q2) +H2; ; } ctx.lineTo(ความกว้าง,ความสูง); ctx.lineTo(0,ความสูง); ctx.closePath();})()

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network