使用画布实现的扫描效果

先定义一个画布标签

<canvas id="canvasId" style="width:150px;height:150px;"></canvas>

然后通过js进行实现

var i = 0;
var c = 0;
var Interval = setInterval(function(){
  	if(i==0){
  		c = 1;
  	}else if(i==150){
  		c = -1;
  	}
  	scan(i+=c);
},15);
function scan(data){
	var canvas = document.getElementById("canvasId");
	var context = canvas.getContext("2d");
	//clearRect 在一个画布的一个矩形区域中清除掉像素。
	context.clearRect(0,0,canvas.width,canvas.height);
	//fillStyle 方法将其染色。
	context.fillStyle = "rgba(172, 171, 171, 0.2)";//设置填充色（可以是渐变色或半透明色）
	//fillRect(x, y, width, height) 方法规定了形状、位置和尺寸。
	context.fillRect(0,0,canvas.width,canvas.height);//填充背景我色。
	//beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
	context.beginPath();
	//路径的颜色
	context.strokeStyle="#7ef44ab3";
	context.lineWidth=5;
	//moveTo(x,y)定义线条开始坐标
	context.moveTo(0,data);
	//lineTo(x,y)定义线条结束坐标 
	context.lineTo(300,data);
	//绘制已定义的路径
	context.stroke();
}

实现效果：