溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)如何使用原生js+canvas實(shí)現(xiàn)模擬心電圖，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
項(xiàng)目運(yùn)行效果：
項(xiàng)目簡介：使用原生js+canvas制作的模擬心電圖的html頁面，因?yàn)楹晚?xiàng)目一起打包放到了github上，所以使用了vue.js的單頁模式，實(shí)際上你不需要使用任何額外的框架和樣式，也可以完成這個(gè)demo，現(xiàn)在讓我們一起來拆解這個(gè)項(xiàng)目吧！
1：在頁面上創(chuàng)建一個(gè)canvas畫布，要讓心電圖的“線”在我們的頁面上動起來，canvas是必不可少的。因?yàn)轫?xiàng)目比較簡單，到此為止頁面上的DOM元素已經(jīng)寫完了，主要的工作量集中在js部分
<div class="heartBeat"> <canvas id="can">Canvas畫板</canvas> </div>
2：定義幾個(gè)變量并賦值，運(yùn)行時(shí)會需要用到這些變量進(jìn)行計(jì)算
var can = document.getElementById('can'),//畫布對象
pan,//獲取2D圖像API接口
index = 0,//用來接收setinerval的值
flag = true,//用來控制心電圖折線的運(yùn)行方向
wid = document.body.clientWidth,//獲取瀏覽器寬度
hei = document.body.clientHeight,//獲取瀏覽器高度
x = 0,//心電圖的“點(diǎn)”在畫布上的x軸坐標(biāo)，從0開始
y = hei/2;//心電圖的“點(diǎn)”在畫布上的y軸坐標(biāo)，從頁面y軸居中位置開始3:初始化畫布，給畫布設(shè)置各種屬性
function start(){
can.height = hei;//設(shè)置畫布高度
can.width = wid;//設(shè)置畫布寬度
pan = can.getContext("2d");//獲取2D圖像API接口
pan.strokeStyle = "#08b95a";//設(shè)置畫筆顏色
pan.lineJoin = "round";//設(shè)置畫筆軌跡基于圓點(diǎn)拼接
pan.lineWidth = 9;//設(shè)置畫筆粗細(xì)
pan.beginPath();//開始一條畫筆的路徑
pan.moveTo(x,y);//定位我們的“落筆點(diǎn)”
index = setInterval(move,1);//讓我們的畫筆動起來
};可以看到，在這里我們還沒有涉及到“畫”的動作，僅僅只是初始化了畫布尺寸，使畫布充滿屏幕，同時(shí)定義了畫筆的顏色、粗細(xì)、落筆點(diǎn)等操作，然后使用setInterval方法讓畫筆不停地按照我們計(jì)算的路線運(yùn)動，如果你對setInterval方法不是很熟悉，建議你看下 setInterVal用法 ,這里不再敷述。因?yàn)槲覀兿胍屝碾妶D無限循環(huán)且自動執(zhí)行，所以在這里將它封裝為start()函數(shù)，這樣當(dāng)心電圖運(yùn)動到屏幕最右方時(shí)，我們重新執(zhí)行這個(gè)start()函數(shù)，就可以實(shí)現(xiàn)讓心電圖無限循環(huán)了
4.讓心電圖動起來！可以說，前面的步驟都沒有什么難度，真正的核心代碼在于讓我們的心電圖動起來，并且是按照我們希望的路線前進(jìn)，下面我們就讓心電圖真正活過來
function move(){
x++;//x軸是始終運(yùn)動的，所以x一直自增
if(x < 100){
//前100px，我們不希望做垂直運(yùn)動，讓點(diǎn)只沿垂直方向運(yùn)動即可，所以不做任何操作
}else{
if(x >= wid - 100){
//最后的100px，同樣希望心電圖只做水平運(yùn)動，不會上下波動，所以不做任何操作
}else{
//為了讓心電圖看起來更加逼真，我們希望心電圖在運(yùn)動時(shí)每次的波峰和波谷都是隨機(jī)的，這樣更類似于人類的心跳，所以我們給它一個(gè)隨機(jī)值z
var z = Math.random()*280;
if(y <= z){
//畫布的坐標(biāo)是從左上角開始計(jì)算的，也就是最左上角的點(diǎn)的坐標(biāo)是（0,0）,y是當(dāng)前畫筆所在坐標(biāo)的y軸，假如y小于z，就代表y已經(jīng)到達(dá)波峰位置，準(zhǔn)備開始向波谷運(yùn)動
flag = true
}
if((hei - y) <= z){
//假如當(dāng)前畫筆在y軸的坐標(biāo)y距離瀏覽器底部hei的差值已經(jīng)小于隨機(jī)值z，代表當(dāng)前的畫筆已經(jīng)運(yùn)行到波谷位置，準(zhǔn)備轉(zhuǎn)向波峰位置運(yùn)動
flag = false
}
if(flag){
//假如flag為true，代表畫筆仍然向波谷位置前進(jìn)，需要花點(diǎn)功夫理解的是，因?yàn)楫嫴甲笊辖堑狞c(diǎn)的坐標(biāo)是（0,0），所以y的值越大，畫筆在y軸的位置越靠近瀏覽器底部，所以向波谷運(yùn)動時(shí)，y的值是不斷增加的，同時(shí)為了讓波峰波谷更陡峭，我這里設(shè)置y += 5，
y+=5
}else{
//假如flag為false，表示向波峰運(yùn)動，y的值是不斷減小的
y-=5
}
}
}
if(x == wid){
//當(dāng)畫筆運(yùn)動到瀏覽器右側(cè)邊緣，停止繪圖
pan.closePath();
//清除循環(huán)
clearInterval(index);
//將index置零，準(zhǔn)備下一次循環(huán)
index = 0;
//重新定位畫筆到屏幕左側(cè)上下居中的位置
x = 0;
y = hei/2;
flag = true;
//重新進(jìn)行下一次心電圖的繪制
start();
}
//lineTo和stroke函數(shù)負(fù)責(zé)描繪運(yùn)動軌跡
pan.lineTo(x,y);
pan.stroke();
}5：注意事項(xiàng)，到這里實(shí)際上心電圖已經(jīng)可以運(yùn)行起來了，但是要注意的是，設(shè)置你的body高度為100%，否則畫布可能無法撐滿整個(gè)頁面
html,body{
width: 100%;
height: 100%;
margin: 0;
}項(xiàng)目完整代碼：
<!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>
<div id="canvas">
<canvas id="can">Canvas畫板</canvas>
</div>
<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";//設(shè)置畫筆顏色
pan.lineJoin = "round";//設(shè)置畫筆軌跡基于圓點(diǎn)拼接
pan.lineWidth = 9;//設(shè)置畫筆粗細(xì)
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>1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
關(guān)于“如何使用原生js+canvas實(shí)現(xiàn)模擬心電圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼