【canvas】心电图绘制

作者: 写写而已 | 来源:发表于2023-10-29 18:55 被阅读0次

Android canvas绘制心电图
浅析HTML5的Canvas——案例绘制
四、Android绘制知识总结(画布篇)
canvas
HTML5 Canvas笔记——Canvas绘制矩形（外角矩形和
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
Android中canvas基本使用
自定义View drawText()绘制文字
Android 自定义View(学习整理绘制顺序)
canvas绘制仪表盘

GIF 2023-10-30 18-46-11.gif

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background-color: #333;
            }
            div {
                padding: 16px;
                width: 400px;
                height: 160px;
                background-color: #fff;
                border-radius: 6px;
                margin: 20px;
                position: relative;
            }
            canvas {
                position: absolute;
                left: 16px;
                top: 16px;
            }
        </style>
    </head>
    <body>
        <div>
            <canvas id="c1" width="400" height="160"></canvas>
            <canvas id="c2" width="400" height="160"></canvas>
        </div>
    </body>
    <script>
        let sd = [100, 180, 170, 60, 100, 100,100, 100, 100, 160, 80, 120, 100, 100, 100, 100, 100, 100, 100, 100]
        /** 画线 */
        let data = []
        function drawLine(ctx, shadow) {
            /** 开始x坐标、开始y坐标、结束x坐标、结束y坐标 */
            let grd = ctx.createLinearGradient(0, 100, 400, 100)
            grd.addColorStop(0, `rgba(14, 185, 160, ${shadow ? 0.1 : 1})`)
            grd.addColorStop(1, `rgba(160, 209, 118, ${shadow ? 0.1 : 1})`)
            // 将渐变赋值给线的样式
            ctx.strokeStyle = grd
            // 高大约170+
            let pyX = shadow ? 6 : 0
            ctx.beginPath()
            let newData = data.map(item => {
                return 160 - (item / 200) * 140
            })
            // console.log(newData)
            // console.log('***********')
            // ctx.moveTo(0, endPoint)
            newData.forEach((item, index) => {
                let x = index * 4
                ctx.lineTo(x, item + pyX)
            })
            ctx.lineWidth = shadow ? 5 : 2
            ctx.stroke()
        }
        function drwaBg(ctx) {
            /*1.绘制网格*/
            /*2.网格的大小*/
            var lineNumber = 6
            var canvasHeight = ctx.canvas.height - lineNumber
            var canvasWidth = ctx.canvas.width
            console.log(canvasWidth, canvasHeight)
            for (var i = 0; i < 6; i++) {
                let endPoint = i * 28 + 10.5
                ctx.beginPath()
                ctx.moveTo(0, endPoint)
                ctx.lineTo(canvasWidth, endPoint)
                ctx.strokeStyle = '#ddd'
                ctx.lineWidth = 1
                ctx.stroke()
            }
        }
        let c1 = document.querySelector('#c1')
        let ctx1 = c1.getContext('2d')
        drwaBg(ctx1)
        let c2 = document.querySelector('#c2')
        let ctx2 = c2.getContext('2d')
        let stop = 0
        let index = 0
        function loop() {
            if(data.length>= 100) {
                data.shift()
            }
            
            data.push(sd[index])
            index++
            if(index>20) {
                index = 0
            } 
            // console.log('-----------')
            // console.log(data)
        
            ctx2.clearRect(0, 0, 1000, 1000)
            drawLine(ctx2)
            drawLine(ctx2, true)
            
            window.requestAnimationFrame(() => {
                if(stop < 5000){
                    loop()
                }
                stop ++
            })
        }
        loop()
        
        
    </script>
</html>