首頁 > 文章 > web前端 > 原生js和canvas模擬心電圖程式碼分享

原生js和canvas模擬心電圖程式碼分享

小云云原創: 2018-02-05 13:33:041998瀏覽

使用原生js+canvas製作的模擬心電圖的html頁面，因為和專案一起打包放到了github上，所以使用了vue.js的單頁模式，實際上你不需要使用任何額外的框架和樣式，也可以完成這個demo，現在就讓我們一起來拆解這個專案吧！

1：在頁面上建立一個canvas畫布，要讓心電圖的「線」在我們的頁面上動起來，canvas是不可或缺的。因為專案比較簡單，到此為止頁面上的DOM元素已經寫完了，主要的工作量集中在js部分

<p class="heartBeat">
 　　<canvas id="can">Canvas画板</canvas>
 </p>

2：定義幾個變數並賦值，運行時會需要用到這些變數進行計算

var can = document.getElementById(&#39;can&#39;),//画布对象
    pan,//获取2D图像API接口
    index = 0,//用来接收setinerval的值
    flag = true,//用来控制心电图折线的运行方向
    wid = document.body.clientWidth,//获取浏览器宽度
    hei = document.body.clientHeight,//获取浏览器高度
    x = 0,//心电图的“点”在画布上的x轴坐标，从0开始
    y = hei/2;//心电图的“点”在画布上的y轴坐标，从页面y轴居中位置开始

3:初始化畫布，為畫布設定各種屬性

function start(){
    can.height = hei;//设置画布高度
    can.width = wid;//设置画布宽度
    pan = can.getContext("2d");//获取2D图像API接口
    pan.strokeStyle = "#08b95a";//设置画笔颜色
    pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
    pan.lineWidth = 9;//设置画笔粗细
    pan.beginPath();//开始一条画笔的路径
    pan.moveTo(x,y);//定位我们的“落笔点”
    index = setInterval(move,1);//让我们的画笔动起来
  };

可以看到，在這裡我們還沒有涉及到「畫」的動作，僅僅只是初始化了畫布尺寸，使畫布充滿螢幕，同時定義了畫筆的顏色、粗細、落筆點等操作，然後使用setInterval方法讓畫筆不停地按照我們計算的路線運動，如果你對setInterval方法不是很熟悉，建議你看下setInterVal用法,這裡不再敷述。因為我們想要讓心電圖無限循環且自動執行，所以在這裡將它封裝為start()函數，這樣當心電圖運動到螢幕最右邊時，我們重新執行這個start()函數，就可以實現讓心電圖無限循環了

4.讓心電圖動起來！可以說，前面的步驟都沒有什麼難度，真正的核心程式碼在於讓我們的心電圖動起來，並且是按照我們希望的路線前進，下面我們就讓心電圖真正活過來

function move(){
    x++;//x轴是始终运动的，所以x一直自增
    if(x < 100){
      //前100px，我们不希望做垂直运动，让点只沿垂直方向运动即可，所以不做任何操作
    }else{
      if(x >= wid - 100){
      //最后的100px，同样希望心电图只做水平运动，不会上下波动，所以不做任何操作
      }else{
        //为了让心电图看起来更加逼真，我们希望心电图在运动时每次的波峰和波谷都是随机的，这样更类似于人类的心跳，所以我们给它一个随机值z
        var z = Math.random()*280;

        if(y <= z){
          //画布的坐标是从左上角开始计算的，也就是最左上角的点的坐标是（0,0）,y是当前画笔所在坐标的y轴，假如y小于z，就代表y已经到达波峰位置，准备开始向波谷运动
          flag = true
        }
        if((hei - y) <= z){
          //假如当前画笔在y轴的坐标y距离浏览器底部hei的差值已经小于随机值z，代表当前的画笔已经运行到波谷位置，准备转向波峰位置运动
          flag = false
        }
        if(flag){
          //假如flag为true，代表画笔仍然向波谷位置前进，需要花点功夫理解的是，因为画布左上角的点的坐标是（0,0），所以y的值越大，画笔在y轴的位置越靠近浏览器底部，所以向波谷运动时，y的值是不断增加的，同时为了让波峰波谷更陡峭，我这里设置y += 5，
          y+=5
        }else{
          //假如flag为false，表示向波峰运动，y的值是不断减小的
          y-=5
        }
      }
    }
    if(x == wid){
      //当画笔运动到浏览器右侧边缘，停止绘图
      pan.closePath();
      //清除循环
      clearInterval(index);
      //将index置零，准备下一次循环
      index = 0;
      //重新定位画笔到屏幕左侧上下居中的位置
      x = 0;
      y = hei/2;
      flag = true;
      //重新进行下一次心电图的绘制
      start();
    }
    //lineTo和stroke函数负责描绘运动轨迹
    pan.lineTo(x,y);
    pan.stroke();
  }

5：注意事項，到這裡實際上心電圖已經可以運行起來了，但是要注意的是，設定你的body高度為100%，否則畫布可能無法撐滿整個頁面

html,body{
   width: 100%;
   height: 100%;
   margin: 0;
  }

專案完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟心电图</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>
<p id="canvas">
  <canvas id="can">Canvas画板</canvas>
</p>

<script src="js/vue.min.js"></script>
<script>
  var can = document.getElementById(&#39;can&#39;),
    pan,
    index = 0,
    flag = true,
    wid = document.body.clientWidth,
    hei = document.body.clientHeight,
    x = 0,
    y = hei/2;
  start();
  function start(){
    can.height = hei;
    can.width = wid;
    pan = can.getContext("2d");//获取2D图像API接口
    pan.strokeStyle = "#08b95a";//设置画笔颜色
    pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
    pan.lineWidth = 9;//设置画笔粗细
    pan.beginPath();
    pan.moveTo(x,y);
    index = setInterval(move,1);
  };
  function move(){
    x++;
    if(x < 100){

    }else{
      if(x >= wid - 100){

      }else{
        var z = Math.random()*280;
        if(y <= z){
          flag = true
        }
        if((hei - y) <= z){
          flag = false
        }
        if(flag){
          y+=5
        }else{
          y-=5
        }
      }
    }
    if(x == wid){
      pan.closePath();
      clearInterval(index);
      index = 0;
      x = 0;
      y = hei/2;
      flag = true;
      start();
    }
    pan.lineTo(x,y);
    pan.stroke();
  }

 /* */

</script>
</body>
</html>

原生js和canvas模擬心電圖程式碼分享

相關文章