最終結果を見てみましょう
実現のアイデア
- 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);この時の効果：
地図を描く（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=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));
}キャンバスはレンダリングされるたびにクリーンアップされます
このときの実行効果は以下のとおりです。
ポインタが正しくありません。コードを変更してキャンバスをクリーンアップするだけです。
//清洗画布
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));
}この時点での最終的な効果は次のとおりです。
完全なコード、無料ポイントのダウンロード
兄弟よ、3年連続で行こう！