บทความนี้จะแนะนำโค้ดตัวอย่างการใช้ Canvas ในการวาดคลื่นไฟฟ้าหัวใจและแชร์กับทุกคน โดยมีรายละเอียดดังนี้
การแสดงผล:
ความคิด:
1. จำลองจุด (หากคุณมีข้อมูลจริง ให้แปลงข้อมูลเป็นจุดพิกัดที่สอดคล้องกับผืนผ้าใบ)
สิ่งสำคัญที่ควรทราบเมื่อจำลองจุดคือ ส่วนที่ยกขึ้นจะต้องสมมาตรและต้องปรากฏขึ้นลงแบบสุ่มเพื่อให้ดูดี
2. วาดเส้น
เมื่อวาดเส้นคุณต้องใส่ใจกับกระบวนการเคลื่อนที่ด้วยความเร็วคงที่
ตัวอย่างเช่น จากจุด A ไปยังจุด B ไม่ใช่แค่จาก A ถึง B แต่จากจุด A ถึง A1, A2...และสุดท้ายไปยัง B (เป็นการยากกว่าที่จะย้ายพื้นที่นี้ตามสัดส่วน)
3. เอฟเฟกต์บางอย่างของการวาดเส้น เช่น การเพิ่มเงา (คุณสามารถใช้ได้อย่างอิสระที่นี่) โค้ดเฉพาะ
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>คลื่นไฟฟ้าหัวใจ</title> <meta name=viewport content=width=device-width, Initial-scale=1, ผู้ใช้ -scalable=no> <style> html,body{ ความกว้าง: 100%; ความสูง: 100%; ระยะขอบ: 0; } ผืนผ้าใบ { พื้นหลัง: #000; 100%; ความสูง: 100%; } </style> </head> <body> <div id=canvas> <canvas id=can></canvas> </div> <script> var can = document.getElementById( 'can'), แพน, ดัชนี = 0, flag = true, wid = document.body.clientWidth, hei = document.body.clientHeight, x = 0, y = hei/2, DrawX = 0, DrawY = hei/2, DrawXY = [], cDrawX = 0, i = 0, reX = 0, reY = 0; start(){ can.height = hei; can.width = wid; pan = can.getContext(2d); pan.lineWidth = 6; pan.shadowColor = #228DFF; pan.shadowOffsetX = 0; pan.shadowOffsetY = 0; pan.shadowBlur = 20; pan.beginPath(x,y); 1); }; ฟังก์ชั่น DrawXYS(){ if(drawX > wid){ }else{ if(drawY == hei/2){ if(flag){ flag = false; }else{ var _y = Math.ceil(Math.random()*10); _y = _y/2; if(Number.isInteger(_y)){ วาดY += Math.random()*180+30; } อื่น ๆ { DrawY -= Math.random()*180+30; } cDrawX = Math.random()*40+15; }else{ DrawY = hei/2; } ย้ายฟังก์ชัน (){ var x = DrawXY[i].x, y = DrawXY[i].y; ถ้า(reX >= x - 1){ reX = x; reY = y; i++; return; } if(y >hei/2){ reX = x; i++; } }else if(y < hei/2){ if(reY <= y){ reX = x; reY = y; i++; } } อื่น ๆ reX = x; reY = y; i++; return; } reX += 1; if(y == hei/2){ }else{ var c = Math.abs [i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y)); var _yt = (reX-drawXY[i-1].x)/c; if(drawXY[i].y < DrawXY[i-1].y){ reY = DrawXY[i-1].y - _yt }else{ reY = DrawXY[i-1].y + _yt; } } ซีซี(); } ฟังก์ชัน cc(){ ถ้า(i == DrawXY.length){ pan.closePath(); clearInterval(index); ดัชนี = 0; x = 0; y = จริง; ; } } </script></body></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network