html5 canvas realizes radar scanning animation special effects

Let's take a look at the final result

Realization ideas

1. Draw 4 circles
2. Draw a crosshair
3. Draw a scanned pointer
4. Let the pointer turn

Radar constructor

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;

			
		}

initialization

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

The effect at this time:

Draw a map (4 circles and a cross)

Write a circular constructor

	 //构造函数
	 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;
	 }

Write the constructor of the line segment

 //直线的构造
	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;
	}

Create circles and crosshairs

//创建地图
		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);
 			
 
		}

All the created graphics are stored in renderArr, and then drawn at one time, the effect is as follows

Next draw the scan pointer (added in 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;

effect

To make this pointer turn

Is to change the start angle and end angle of the pointer drawing

	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();
		}

Add a timer and clean up the canvas

     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));
	   }

The canvas will be cleaned every time it is rendered

The execution effect at this time is as follows:

The pointer is not right, just modify the code to clean up the canvas.

//清洗画布
		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));
	   }

The final effect at this time is as follows:

 

Complete code, free points download

 

Let's go for three consecutive years, brothers!