先看一下最终效果

实现思路

雷达构造函数

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

此时的效果：

绘制地图（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中，然后一次性绘制，效果如下

接下来绘制扫描指针（在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;

效果

要让这个指针转起来

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

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=0point.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的时候会清理画布

此时执行效果如下：

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

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

此时最终效果如下：

完整代码、免积分下载

给个三连再走吧兄弟们！