使用原生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('can'),//画布对象
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('can'),
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>登入後複製
相關推薦：
Canvas實作炫麗的粒子運動效果
canvas多邊形的畫法範例
#html2 canvas實作瀏覽器截圖
以上是原生js和canvas模擬心電圖程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
