從2015年2月轉(zhuǎn)行進(jìn)入IT行業(yè)，到現(xiàn)在也有將近兩年的時(shí)間了，從最開始的java到現(xiàn)在的前端，前進(jìn)的路上一直靠自己摸索，一路走到現(xiàn)在，前端大神是絕對(duì)談不上的，最多算一只剛?cè)腴T的菜鳥。
從最開始的懵懵懂懂，到現(xiàn)在學(xué)著開始寫github、寫博客，其實(shí)技術(shù)上沒有太多可寫的，畢竟自己也才剛剛?cè)腴T，只能說是按照自己的興趣，寫點(diǎn)有意思的小項(xiàng)目，項(xiàng)目上存在的問題，也希望大神能夠予以指正，目前這個(gè)demo的功能已經(jīng)實(shí)現(xiàn)，后期我會(huì)對(duì)樣式、代碼等方面進(jìn)行優(yōu)化。
項(xiàng)目運(yùn)行效果：
項(xiàng)目簡(jiǎn)介：使用原生js+canvas制作的模擬心電圖的html頁(yè)面，因?yàn)楹晚?xiàng)目一起打包放到了github上，所以使用了vue.js的單頁(yè)模式，實(shí)際上你不需要使用任何額外的框架和樣式，也可以完成這個(gè)demo，現(xiàn)在讓我們一起來(lái)拆解這個(gè)項(xiàng)目吧！
1：在頁(yè)面上創(chuàng)建一個(gè)canvas畫布，要讓心電圖的“線”在我們的頁(yè)面上動(dòng)起來(lái)，canvas是必不可少的。因?yàn)轫?xiàng)目比較簡(jiǎn)單，到此為止頁(yè)面上的DOM元素已經(jīng)寫完了，主要的工作量集中在js部分
<div class="heartBeat"> <canvas id="can">Canvas畫板</canvas> </div>
2：定義幾個(gè)變量并賦值，運(yùn)行時(shí)會(huì)需要用到這些變量進(jìn)行計(jì)算
var can = document.getElementById('can'),//畫布對(duì)象 pan,//獲取2D圖像API接口 index = 0,//用來(lái)接收setinerval的值 flag = true,//用來(lái)控制心電圖折線的運(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è)面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);//讓我們的畫筆動(dòng)起來(lái) };可以看到，在這里我們還沒有涉及到“畫”的動(dòng)作，僅僅只是初始化了畫布尺寸，使畫布充滿屏幕，同時(shí)定義了畫筆的顏色、粗細(xì)、落筆點(diǎn)等操作，然后使用setInterval方法讓畫筆不停地按照我們計(jì)算的路線運(yùn)動(dòng)，如果你對(duì)setInterval方法不是很熟悉，建議你看下 setInterVal用法 ,這里不再敷述。因?yàn)槲覀兿胍屝碾妶D無(wú)限循環(huán)且自動(dòng)執(zhí)行，所以在這里將它封裝為start()函數(shù)，這樣當(dāng)心電圖運(yùn)動(dòng)到屏幕最右方時(shí)，我們重新執(zhí)行這個(gè)start()函數(shù)，就可以實(shí)現(xiàn)讓心電圖無(wú)限循環(huán)了
4.讓心電圖動(dòng)起來(lái)！可以說，前面的步驟都沒有什么難度，真正的核心代碼在于讓我們的心電圖動(dòng)起來(lái)，并且是按照我們希望的路線前進(jìn)，下面我們就讓心電圖真正活過來(lái)
function move(){ x++;//x軸是始終運(yùn)動(dòng)的，所以x一直自增 if(x < 100){ //前100px，我們不希望做垂直運(yùn)動(dòng)，讓點(diǎn)只沿垂直方向運(yùn)動(dòng)即可，所以不做任何操作 }else{ if(x >= wid - 100){ //最后的100px，同樣希望心電圖只做水平運(yùn)動(dòng)，不會(huì)上下波動(dòng)，所以不做任何操作 }else{ //為了讓心電圖看起來(lái)更加逼真，我們希望心電圖在運(yùn)動(dòng)時(shí)每次的波峰和波谷都是隨機(jī)的，這樣更類似于人類的心跳，所以我們給它一個(gè)隨機(jī)值z(mì) 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)動(dòng) flag = true } if((hei - y) <= z){ //假如當(dāng)前畫筆在y軸的坐標(biāo)y距離瀏覽器底部hei的差值已經(jīng)小于隨機(jī)值z(mì)，代表當(dāng)前的畫筆已經(jīng)運(yùn)行到波谷位置，準(zhǔn)備轉(zhuǎn)向波峰位置運(yùn)動(dòng) flag = false } if(flag){ //假如flag為true，代表畫筆仍然向波谷位置前進(jìn)，需要花點(diǎn)功夫理解的是，因?yàn)楫嫴甲笊辖堑狞c(diǎn)的坐標(biāo)是（0,0），所以y的值越大，畫筆在y軸的位置越靠近瀏覽器底部，所以向波谷運(yùn)動(dòng)時(shí)，y的值是不斷增加的，同時(shí)為了讓波峰波谷更陡峭，我這里設(shè)置y += 5， y+=5 }else{ //假如flag為false，表示向波峰運(yùn)動(dòng)，y的值是不斷減小的 y-=5 } } } if(x == wid){ //當(dāng)畫筆運(yùn)動(dòng)到瀏覽器右側(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)動(dòng)軌跡 pan.lineTo(x,y); pan.stroke(); }5：注意事項(xiàng)，到這里實(shí)際上心電圖已經(jīng)可以運(yùn)行起來(lái)了，但是要注意的是，設(shè)置你的body高度為100%，否則畫布可能無(wú)法撐滿整個(gè)頁(yè)面
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>以上這篇使用原生js+canvas實(shí)現(xiàn)模擬心電圖的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
