console
let index = 0
const size = {width:800,height:80}
const middle = size.height / 2
let canvas = null
let ctx= null
let gain = 2
const example = [40,40,40,40,55,35,65]
const ecg = []
for(let i=0;i<300000;i++){
ecg.push(...example)
}
let frame = null
function loaded(){
canvas = document.createElement('canvas')
canvas.style.backgroundColor = "#000"
ctx = canvas.getContext('2d')
canvas.width = size.width
canvas.height = size.height
ctx.clearRect(size.width,size.height,0,0)
ctx.lineWidth = 3
ctx.strokeStyle = 'yellow'
return new Promise(resolve=>{
document.addEventListener("DOMContentLoaded",()=>{
document.body.appendChild(canvas)
resolve(canvas)
})
})
}
function point(x,y){
x = (x+1)*5
x%=size.width
y*=gain
y-=(middle*(gain-1))
return [x,y]
}
function draw(){
if(index>=ecg.length) return
ctx.beginPath()
if(index===0){
ctx.moveTo(0,middle)
}else{
ctx.moveTo(...point(index-1,ecg[index-1]))
}
const [x,y] = point(index,ecg[index])
ctx.lineTo(x,y)
ctx.stroke()
ctx.closePath()
index++
}
function loop(){
if(drawVersion2()){
requestAnimationFrame(loop)
}
}
function drawVersion2(){
if(index>=ecg.length) return false
ctx.beginPath()
const move = index===0?[0,middle]:point(index-1,ecg[index-1])
ctx.moveTo(...move)
ctx.clearRect(move[0],0,50
,size.height)
for(let i=0;i<4;i++){
const [x,y] = point(index,ecg[index])
const restart = x<move[0]
if(restart){
index++
break;
}
ctx.lineTo(x,y)
index++
if(index>=ecg.length) break;
}
ctx.stroke()
ctx.closePath()
return true
}
loaded().then(()=>{
const CheckedElement = document.querySelector(`input[type="radio"][value="${gain}"]`)
CheckedElement.setAttribute('checked',true)
document.querySelectorAll('input[type="radio"]').forEach(ele=>{
ele.addEventListener('change',()=>{
gain = parseFloat(ele.value)
})
})
loop()
})
<span>增益</span>
<div>
<input id="one" type="radio" name="gain" value="0.5">
<label for="one">0.5</label>
</div>
<div>
<input id="two" type="radio" name="gain" value="1">
<label for="two">1</label>
</div>
<div>
<input id="three" type="radio" name="gain" value="2">
<label for="three">2</label>
</div>