H5canvas画相似心电图

时间 2019-11-10

标签 h5canvas canvas 相似心电图繁體版

原文原文链接

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像，咱们可使用canvas来绘制相似心电图的东西。html

效果图以下：canvas

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        canvas {
            width: 500px;
            height: 250px;
            border: 1px solid #666;
        }
    </style>

    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script>
        //获取canvas的节点
        var canvas = document.getElementById('canvas');
        //ctx是一个画笔
        var ctx = canvas.getContext('2d');
        // 绿色矩形
        ctx.beginPath();
        //线的粗细
        ctx.lineWidth = "1";
        //线的颜色
        ctx.strokeStyle = "red";
        //起始位置
        ctx.moveTo(0, 10);
        var x = 0;
        //一个定时器
        setInterval(function() {
            //x轴的偏移
            x += 10;
            //y轴的偏移取随机数
            ctx.lineTo(x, Math.random() * 100);
            ctx.stroke();
        }, 1000)
    </script>

</html>