<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: black;
        }
        #c1 {
            background: rgb(64, 110, 170);
        }
    </style>
    <script>
      window.onload = function() {
      var oC = document.getElementById('c1')
      var oGC = oC.getContext('2d')
      var num = 0;
      ok=false;

      setInterval(function() {
          if(!ok){
              num++;
          }else{
              num--;
          }
          if(num>390) ok=true;
          if(num<=10) ok=false;
        
        
        oGC.clearRect(0,0,oC.width,oC.height)
        
        oGC.beginPath()
        oGC.moveTo(num,0)
        oGC.lineTo(num,400)
        oGC.stroke()
      },3)
    }

 
    </script>
</head>

<body>
    <canvas id="c1" width="400" height="400"></canvas>
</body>

</html>

效果图：

javascript扫描版 js扫描仪_html