使用canvas简单绘制心电图

绘制心电图，首先就要绘制表格

先贴出html代码 ：

canvas id="ecg" width="751px" height="751px" ></canvas>

然后是绘制表格的函数，此表格包含大中小三种格子，分别对应三种函数：

        function drawSmallGrid(c_canvas){
            var context = c_canvas.getContext("2d");
            context.strokeStyle = "#f1dedf";
            context.strokeWidth=1;
            context.beginPath();
            for (var x = 0.5; x < 751; x += 3) {
                context.moveTo(x, 0);
                context.lineTo(x, 751);
                context.stroke(); 
            }
            for (var y = 0.5; y < 751; y += 3) {
                context.moveTo(0, y);
                context.lineTo(751, y);
                context.stroke(); 
            }
            context.closePath();
        } 
     
        function drawMediumGrid(c_canvas){
            var context = c_canvas.getContext("2d");
                context.strokeStyle = "#f0adaa";
                context.strokeWidth=1;
                context.beginPath();
            for (var x = 0.5; x < 751; x += 15) {
                context.moveTo(x, 0);
                context.lineTo(x, 751);
                context.stroke(); 
            };
            for (var y = 0.5; y < 751; y += 15) {
                context.moveTo(0, y);
                context.lineTo(751, y);
                context.stroke(); 
            };
            context.closePath();
        } 
 
        function drawBigGrid(c_canvas){
            var context = c_canvas.getContext("2d");
            context.strokeStyle = "#e0514b";
            context.strokeWidth=1;
            context.beginPath();
            for (var x = 0.5; x < 751; x += 75) {
                context.moveTo(x, 0);
                context.lineTo(x, 751);
                context.stroke(); 
            };
            for (var y = 0.5; y < 751; y += 75) {
                context.moveTo(0, y);
                context.lineTo(751, y);
                context.stroke(); 
            };
            context.closePath();
        }

然后是绘制心电图的函数：

        function drawLine(c_canvas) {
            var ctx = c_canvas.getContext('2d');
            ctx.strokeStyle = "#000";
            ctx.strokeWidth = 1;
            ctx.beginPath();
            ctx.moveTo(0.5, 300);
            ctx.lineTo(90, 300)
            for(var x = 5; x < 35; x++) {
                var num = Math.random() * 5 + 5;  // 5-10
                // 基数为正，偶数为负
                if(x % 2 === 0) {
                    num = -num;
                }
                ctx.lineTo(x * 20, num * 20 +300)
            }
            ctx.lineTo(700, 300) 
            ctx.lineTo(750, 300) 
            ctx.stroke();
            ctx.closePath();
        }

最后一起调用这些函数：

        (function draw(){
            var c_canvas = document.getElementById("ecg");
            drawSmallGrid(c_canvas);
            drawMediumGrid(c_canvas)
            drawBigGrid(c_canvas);
            drawLine(c_canvas);
        })();

神奇的心电图就这样出来了