캔버스를 사용하여 심전도를 그리는 샘플 코드-H5 튜토리얼-php.cn

캔버스를 사용하여 심전도를 그리는 샘플 코드

青灯夜游

풀어 주다： 2018-10-09 15:33:11

앞으로

2570명이 탐색했습니다.

이 글은 캔버스를 활용한 심전도 그리기 샘플 코드 관련 정보를 주로 소개하고 있으니 참고가 필요한 친구들에게 도움이 되었으면 좋겠습니다.

이 기사에서는 캔버스를 사용하여 심전도를 그리는 샘플 코드를 소개하고 모든 사람과 공유합니다.

렌더링:

아이디어:

1. 그런 다음 데이터를 캔버스에 해당하는 좌표점으로 변환합니다)

점을 시뮬레이션할 때 주의해야 할 점은 돌출된 부분이 대칭이어야 하고 위아래로 무작위로 나타나야 보기에 좋다

2. 선 그리기

선을 그릴 때 일정한 속도로 움직이는 과정에 주의를 기울여야 합니다.

예를 들어 A 지점에서 B 지점으로 단순히 A에서 B로 가는 것이 아니라 A 지점에서 A1, A2...그리고 마지막으로 B로 가는 것입니다(이 영역을 비율에 맞게 이동하는 것이 더 어렵습니다)

3. 그림자 추가(여기서 자유롭게 플레이 가능) 특정 코드와 같은 선 그리기의 일부 효과

<!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>
 <p id="canvas">
     <canvas id="can"></canvas>
 </p>
 <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,
         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>

로그인 후 복사

요약: 위 내용은 이 기사의 전체 내용이므로 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!