html5 canvas实现雷达扫描动画特效

矫情吗；* 2021-07-25 02:39 1192阅读 0赞

# 先看一下最终效果 #

![20210303142135884.gif][]

# 实现思路 #

1.  绘制4个圆
2.  绘制一个十字线
3.  绘制一个扫描的指针
4.  让指针转起来

## 雷达构造函数 ##

function Radar(){
    			this.renderArr=[];//待渲染对象存储数组
    			this.rotateAngle=0;//绘制的指针开始角度
    			this.speed=0.01* Math.PI;//绘制的指针偏移速度
    			
    			this.point=null;//存储指针对象
    		}
    		Radar.prototype.init=function(el){
    			if(!el) return ;
    			this.el=el;
    			var canvas = document.createElement('canvas');//创建画布
    			canvas.style.cssText="background:#001900;";//设置样式
    			var W = canvas.width = 300; //设置宽度
    			var H = canvas.height = 300;//设置高度
    			
    			el.appendChild(canvas);//添加到指定的dom对象中
    			
    			this.ctx = canvas.getContext('2d');
    			this.ctx.strokeStyle = 'green';
    			this.canvas=canvas;
    			this.w=W;
    			this.h=H;
    
    			
    		}

### 初始化 ###

var box = document.getElementById('box');
    	var radar = new Radar();
    	radar.init(box);

### 此时的效果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70][]

### 绘制地图（4个圆和一个十字） ###

### 编写圆形的构造函数 ###

//构造函数
    	 function Ball(o){
    		this.x=0,//圆心X坐标
    		this.y=0,//圆心Y坐标
    		this.r=0,//半径
    		this.startAngle=0,//开始角度
    		this.endAngle=0,//结束角度
    		this.anticlockwise=false;//顺时针，逆时针方向指定
    		this.stroke=false;//是否描边
    		this.fill=false;//是否填充
    		this.scaleX=1;//缩放X比例
    		this.scaleY=1;//缩放Y比例
    		
    		this.init(o);
    	 }
    	 //初始化
    	 Ball.prototype.init=function(o){
    		for(var key in o){
    			this[key]=o[key];
    		}
    	}
    		 //绘制
    	 Ball.prototype.render=function(context){
    		var ctx=context;//获取上下文
    		ctx.save();
    		ctx.beginPath();
    		ctx.translate(this.x,this.y);
    		if(this.fill){
    			ctx.moveTo(0,0);
    		}
    		//ctx.moveTo(this.x,this.y);
    		ctx.scale(this.scaleX,this.scaleY);//设定缩放
    		ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
    		if(this.lineWidth){//线宽
    			ctx.lineWidth=this.lineWidth;
    		}
    		if(this.fill){//是否填充
    			this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
    			ctx.fill();
    		}
    		if(this.stroke){//是否描边
    			this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
    			ctx.stroke();
    		}	
    		ctx.restore();
    	 	
    	 	return this;
    	 }

### 编写线段的构造函数 ###

//直线的构造
    	function Line(o){
    		this.x=0,//x坐标
    		this.y=0,//y坐标
    		this.startX=0,//开始点x位置
    		this.startY=0, //开始点y位置
    		this.endX=0,//结束点x位置
    		this.endY=0;//结束点y位置
    		this.thin=false;//设置变细系数
    		
    		this.init(o);
    	}
    	Line.prototype.init=function(o){
    		for(var key in o){
    			this[key]=o[key];
    		}
    	}
    	Line.prototype.render=function(ctx){
    		this.ctx=ctx;
    		innerRender(this);
    		
    		function innerRender(obj){
    			var ctx=obj.ctx;
    			ctx.save()
    			ctx.beginPath();
    			ctx.translate(obj.x,obj.y);
    			if(obj.thin){
    				ctx.translate(0.5,0.5);
    			}
    			if(obj.lineWidth){//设定线宽
    				ctx.lineWidth=obj.lineWidth;
    			}
    			if(obj.strokeStyle){
    				ctx.strokeStyle=obj.strokeStyle;
    			}
    			//划线
    		  	ctx.moveTo(obj.startX, obj.startY);
    		  	ctx.lineTo(obj.endX, obj.endY);
    		  	ctx.stroke();
    		  	ctx.restore();
    		}
    	  	
    	  	return this;
    	}

### 创建圆和十字线 ###

//创建地图
    		Radar.prototype.createMap=function(){
    			var renderArr = this.renderArr;
    			var rectW = this.w;
    			var rectH = this.h;
    			var ball;
    			/*
    				创建几个圆形
    			*/
    			ball = new Ball({
    			 	x:150,//圆心X坐标
    				y:150,//圆心X坐标
    				r:150,//半径
    				startAngle:0,//开始角度
    				endAngle:2*Math.PI,//结束角度
    				stroke:true//是否描边
    			 });
    			 renderArr.push(ball);
    			 
    			 ball = new Ball({
    			 	x:150,//圆心X坐标
    				y:150,//圆心X坐标
    				r:100,//半径
    				startAngle:0,//开始角度
    				endAngle:2*Math.PI,//结束角度
    				stroke:true//是否描边
    			 });
    			 renderArr.push(ball);
    			 
    			 ball = new Ball({
    			 	x:150,//圆心X坐标
    				y:150,//圆心X坐标
    				r:50,//半径
    				startAngle:0,//开始角度
    				endAngle:2*Math.PI,//结束角度
    				stroke:true//是否描边
    			 });
    			 renderArr.push(ball);
    			 
    			  ball = new Ball({
    			 	x:150,//圆心X坐标
    				y:150,//圆心X坐标
    				r:2,//半径
    				startAngle:0,//开始角度
    				endAngle:2*Math.PI,//结束角度
    				stroke:true//是否描边
    			 });
    			 renderArr.push(ball);
    			 
    			 //创建横着的线
    			 var line = new Line({
    				x:0,
    				y:0,
    			 	startX:0,
    			 	startY:150,
    			 	endX:300,
    			 	endY:150,
    			 	thin:true
    			})
     			renderArr.push(line);
    			//创建竖着的线
    			line = new Line({
    				x:0,
    				y:0,
    			 	startX:150,
    			 	startY:0,
    			 	endX:150,
    			 	endY:300,
    			 	thin:true
    			})
     			renderArr.push(line);
     			
     
    		}

### 创建的图形全部存到 renderArr中，然后一次性绘制，效果如下 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1][]

### 接下来绘制扫描指针（在createMap中加入） ###

//绘制指针
    	 		var point = new Ball({
    			 	x:150,//圆心X坐标
    				y:150,//圆心X坐标
    				r:150,//半径
    				startAngle:0,//开始角度
    				endAngle:0.1*Math.PI,//结束角度
    				fill:true,//是否填充
    				fillStyle:'green'//填充的样式
    			 })
    			 renderArr.push(point);
    			 this.point=point;

### 效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2][]

### 要让这个指针转起来 ###

就是更改指针绘制的开始角度和结束角度

Radar.prototype.update=function(){
    			var point = this.point;
    			if(point){
    				point.startAngle=point.endAngle;//新的开始角度等于上一次的结束角度
    		    	this.rotateAngle+=this.speed;
    		    	point.endAngle=this.rotateAngle;//新的结束角度等于每次递增
    	            
    	            if(this.rotateAngle>=2 * Math.PI){//达到一个π时，重置
    	            	this.rotateAngle=0
    	            	point.startAngle=0;
    	            	point.endAngle=this.speed;
    	            }
    			}
    			this.render();
    		}

### 加入定时器，并清理画布 ###

Radar.prototype.start=function(){
    			setInterval(this.update.bind(this),10);//设置定时任务
    		}
    
    	//清洗画布
    		Radar.prototype.clearCanvas=function() {
    		   this.ctx.clearRect(0,0,parseInt(this.w),parseInt(this.h));
    	   }

每次render的时候会清理画布

此时执行效果如下：

![20210303144323308.gif][]

### 指针不太对，修改一下清理画布的代码即可 ###

//清洗画布
    		Radar.prototype.clearCanvas=function() {
    			this.ctx.fillStyle = 'rgba(0,50,0,0.03)';
    		   this.ctx.fillRect(0,0,parseInt(this.w),parseInt(this.h));
    		   
    		  // this.ctx.clearRect(0,0,parseInt(this.w),parseInt(this.h));
    	   }

### 此时最终效果如下： ###

![20210303144627300.gif][]

### [完整代码、免积分下载][Link 1] ###

### 给个三连再走吧兄弟们！ ###

[20210303142135884.gif]: /images/20210724/def10e58810247fba0e95df9f2a16295.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70]: /images/20210724/37552009f3204f0391ae77e28264511d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 1]: /images/20210724/4d9b8aa6fc234d57b72e0e5551a7a187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrbTEyMzQ1Ng_size_16_color_FFFFFF_t_70 2]: /images/20210724/522baed6c7ff429ba22c0804aa01d1bd.png
[20210303144323308.gif]: /images/20210724/61babb7d6ae84128b911c3c39ea361bd.png
[20210303144627300.gif]: /images/20210724/e0fd72dc484e42539eb025feb78d45a4.png
[Link 1]: https://download.csdn.net/download/dkm123456/15543152