|
const canvasContainer = document.getElementById('canvas-container'); |
|
const canvas = document.createElement('canvas'); |
|
const ctx = canvas.getContext('2d'); |
|
|
|
canvas.width = canvasContainer.offsetWidth; |
|
canvas.height = 100; |
|
canvasContainer.appendChild(canvas); |
|
|
|
const ecgData = [ |
|
{ time: 0, value: 0 }, |
|
{ time: 10, value: 1 }, |
|
{ time: 20, value: 0.5 }, |
|
{ time: 30, value: -1 }, |
|
{ time: 40, value: -0.5 }, |
|
{ time: 50, value: 0 }, |
|
{ time: 60, value: 0.5 }, |
|
{ time: 70, value: 1 }, |
|
{ time: 80, value: 0.5 }, |
|
{ time: 90, value: -0.5 }, |
|
{ time: 100, value: 0 } |
|
]; |
|
|
|
const drawEcg = () => { |
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
ctx.lineWidth = 2; |
|
ctx.strokeStyle = 'rgba(0, 0, 255, 1)'; |
|
ctx.beginPath(); |
|
ctx.moveTo(0, canvas.height / 2); |
|
ecgData.forEach((data, i) => { |
|
ctx.lineTo(i, (data.value + 1) * canvas.height / 4); |
|
}); |
|
ctx.stroke(); |
|
}; |
|
|
|
document.getElementById('show').addEventListener('click', () => { |
|
drawEcg(); |
|
}); |
|
|