有做過(guò)體檢的小伙伴們都知道，我們的心電圖是一個(gè)山下浮動(dòng)的折線(xiàn)圖形，那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于：“在html5中怎么使用canvas來(lái)畫(huà)心電圖？”這個(gè)問(wèn)題吧！
本文介紹了用canvas畫(huà)心電圖的示例代碼，分享給大家，具體如下：
效果圖：
思路：
?1.模擬點(diǎn)（如果你有真實(shí)的數(shù)據(jù)，那就是把數(shù)據(jù)幻化成 canvas 對(duì)應(yīng)的坐標(biāo)點(diǎn)）
? 模擬點(diǎn)時(shí)注意的點(diǎn)就是高起部分需要對(duì)稱(chēng)以及為了好看要隨機(jī)出現(xiàn)上上下下
2.畫(huà)線(xiàn)
? 畫(huà)線(xiàn)需要注意有一個(gè)勻速移動(dòng)的過(guò)程。
? 比如 A點(diǎn)到B點(diǎn)，不是簡(jiǎn)單的A畫(huà)到B，而是A點(diǎn)到A1,A2....最后到B（這一塊按照比例移動(dòng)比較難）
3.畫(huà)線(xiàn)的一些效果，比如加上陰影（這里就可以自由發(fā)揮了）具體代碼
<!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;
}
canvas{
background: #000;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="canvas">
<canvas id="can"></canvas>
</div>
<script>
var can = document.getElementById('can'),
pan,
index = 0,
flag = true,
wid = document.body.clientWidth,
hei = document.body.clientHeight,
x = 0,
y = hei/2,
drawX = 0,
drawY = hei/2,
drawXY = [],
cDrawX = 0,
i = 0,
reX = 0,
reY = 0;
start();
function start(){
can.height = hei;
can.width = wid;
pan = can.getContext("2d");
pan.strokeStyle = "white";
pan.lineJoin = "round";
pan.lineWidth = 6;
pan.shadowColor = "#228DFF";
pan.shadowOffsetX = 0;
pan.shadowOffsetY = 0;
pan.shadowBlur = 20;
pan.beginPath();
pan.moveTo(x,y);
drawXYS();
index = setInterval(move,1);
};
function drawXYS(){
if(drawX > wid){
}else{
if(drawY == hei/2){
if(flag){
flag = false;
}else{
var _y = Math.ceil(Math.random()*10);
_y = _y/2;
if(Number.isInteger(_y)){
drawY += Math.random()*180+30;
}else{
drawY -= Math.random()*180+30;
}
flag = true;
}
cDrawX = Math.random()*40+15;
}else{
drawY = hei/2;
}
drawX += cDrawX;
drawXY.push({
x : drawX,
y : drawY
});
drawXYS();
}
}
function move(){
var x = drawXY[i].x,
y = drawXY[i].y;
if(reX >= x - 1){
reX = x;
reY = y;
i++;
cc();
return;
}
if(y > hei/2){
if(reY >= y){
reX = x;
reY = y;
i++;
cc();
return;
}
}else if(y < hei/2){
if(reY <= y){
reX = x;
reY = y;
i++;
cc();
return;
}
}else{
reX = x;
reY = y;
i++;
cc();
return;
}
reX += 1;
if(y == hei/2){
reY = hei/2;
}else{
var c = Math.abs((drawXY[i].x-drawXY[i-1].x)/(drawXY[i].y-drawXY[i-1].y));
var _yt = (reX-drawXY[i-1].x)/c;
if(drawXY[i].y < drawXY[i-1].y){
reY = drawXY[i-1].y - _yt;
}else{
reY = drawXY[i-1].y + _yt;
}
}
cc();
}
function cc(){
if(i == drawXY.length){
pan.closePath();
clearInterval(index);
index = 0;
x = 0;
y = hei/2;
flag = true;
i = 0;
}else{
pan.lineTo(reX, reY);
pan.stroke();
}
}
</script>
</body>
</html>那么我們從文章中就可以了解到有關(guān)于：“在html5中怎么使用canvas來(lái)畫(huà)心電圖？”這個(gè)問(wèn)題的相關(guān)做法，更多有關(guān)于html5這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)學(xué)習(xí)和了解！
