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>

相關標籤/搜索