canvas画布案例——1、心电图 2、绘制矩形——柱状图 3、挂钟 4、饼状图 5、评分空间——五角星 6、动图

本文链接：https://blog.youkuaiyun.com/qq_52301431/article/details/125938770

1、心电图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <style>
        #box {
            border: 1px solid black;
        }
    </style>
    <canvas id="box" width="400px" height="400px"></canvas>
    <script>
        var canvas = document.querySelector("#box")
        var ctx = canvas.getContext("2d") //context 上下文（代码）：用的技术是由底层实现的，我们写的是上层代码，直接调用，使用下层代码
        var arr = [50, 30, 40, 50, 52, 54, 57, 80, 42, 60,70,50,40,60,40]
        var x = 30   //用于后面绘制心电图x y值
        //让数组每一秒加一个元素
        setInterval(()=>{
            arr.push(Math.random()*(120-50)+50)   //代表取随机的人的心跳：范围：50-120
        },1000)
        setInterval(()=>{     // 让心电图动起来
            canvas.width=400  //清除画板
            x-=(30/(1000/30))   //让心电图等比例的动
            biaoge()
            zuobiao()
            xindian()
        },30)
        //绘制表格
        function biaoge() {
            ctx.beginPath()
            ctx.lineWidth = 1
            ctx.strokeStyle = "black"
            var m = 10
            for (var i = 0; i < parseInt(400 / m); i++) {
                //横线
                ctx.moveTo(0, i * m)
                ctx.lineTo(400, i * m)
                //竖线
                ctx.moveTo(i * m, 0)
                ctx.lineTo(i * m, 400)
            }
            ctx.stroke()
        }
        //绘制坐标
        function zuobiao() {
            ctx.beginPath()
            ctx.strokeStyle = "green"
            ctx.lineWidth = 1
            //x轴
            ctx.moveTo(20, 380)
            ctx.lineTo(20, 20)
            ctx.lineTo(10, 30)
            ctx.moveTo(20, 20)
            ctx.lineTo(30, 30)
            //y轴
            ctx.moveTo(20, 380)
            ctx.lineTo(380, 380)
            ctx.lineTo(370, 370)
            ctx.moveTo(380, 380)
            ctx.lineTo(370, 390)
            ctx.stroke()
        }
        //画心电图
        function xindian() {
            ctx.beginPath()
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 5
            for (var i = 0; i < arr.length; i++) {
                ctx.lineTo(i*30+x, 300 - arr[i])

            }
            ctx.stroke()
        }
    </script>
</body>
</html>