Artikel ini memperkenalkan kode contoh penggunaan kanvas untuk menggambar elektrokardiogram dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
Render:
Ide:
1. Simulasikan titik (jika Anda memiliki data nyata, ubah data tersebut menjadi titik koordinat yang sesuai dengan kanvas)
Hal penting yang perlu diperhatikan saat melakukan simulasi titik adalah bagian yang ditinggikan harus simetris dan harus muncul ke atas dan ke bawah secara acak agar terlihat bagus.
2. Gambar garis
Saat menggambar garis, Anda perlu memperhatikan proses pergerakan dengan kecepatan konstan.
Misal dari titik A ke titik B bukan sekedar dari A ke B, tapi dari titik A ke A1, A2...dan terakhir ke B (lebih sulit untuk memindahkan luas ini secara proporsional)
3. Beberapa efek gambar garis, seperti menambahkan bayangan (Anda dapat menggunakannya secara bebas di sini) kode tertentu
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Elektrokardiogram</title> <meta name=viewport content=width=device-width, initial-scale=1, pengguna -scalable=tidak> <style> html,body{ lebar: 100%; tinggi: 100%; margin: 0; } kanvas{ lebar: #000; 100%; tinggi: 100%; } </style> </head> <body> <div id=canvas> <canvas id=can></canvas> </div> <script> var can = document.getElementById( 'bisa'), pan, indeks = 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; fungsi start(){ can.height = hei; can.width = wid; pan = can.getContext(2d); pan.strokeStyle = putih; pan.lineJoin = bulat; pan.shadowColor = #228DFF; pan.shadowOffsetX = 0; pan.shadowOffsetY = 0; pan.shadowBlur = 20; pan.moveTo(x,yS(); 1); }; fungsi drawXYS(){ jika(drawX > wid){ }lainnya{ jika(drawY == hei/2){ if(bendera){ bendera = false; }else{ var _y = Math.ceil(Matematika.random()*10); += Matematika.acak()*180+30; }else{ drawY -= Matematika.acak()*180+30; cDrawX = Math.random()*40+15; }else{ drawY = hei/2; } drawX += cDrawX; drawXY.push({ x : drawX, y : drawXYS(); (){ var x = seriXY[i].x, y = seriXY[i].y; jika(reX >= x - 1){ reX = x; reY = y; i++; kembali; } jika(y > hei/2){ jika(reY >= y){ reX = x; } }lain jika(y < hei/2){ if(reY <= y){ reX = x; reY = y++; cc(); reX = x; reY = y; i++; cc(); kembali; } reX += 1; if(y == hei/2){ reY = hei/2; [i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y)); (reX-drawXY[i-1].x)/c; if(drawXY[i].y < drawXY[i-1].y){ reY = drawXY[i-1].y - }else{ reY = drawXY[i-1].y + _yt; } } cc(); } fungsi cc(){ if(i == drawXY.panjang){ pan.closePath(); clearInterval(indeks); indeks = 0; x = 0; y = hei/2; bendera = benar; ; } } </skrip></tubuh></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.