【关键点】
三坐标雷达视野有限,在雷达屏幕上常以一个固定的扫描角表示。
有些画面中的扫描角不是同色的,而是逐渐变浅的。如下图所示:
要实现这种效果,就不能一次性画一个扇形出来,得把扇形分成若干份,每份填充时赋予递减的透明度,变浅的效果就实现了。
【图例】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>扫描角渐变的蓝色雷达之眼</title>
<style type="text/css">
.centerlize{
margin:0 auto;
width:1200px;
}
</style>
</head>
<body onload="init();">
<div class="centerlize">
<canvas id="myCanvas" width="10px" height="10px" style="border:1px dotted black;">
如果看到这段文字说您的浏览器尚不支持HTML5 Canvas,请更换浏览器再试.
</canvas>
</div>
</body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来,粘贴到文本编辑器中,
* 另存为.html文件,再用chrome浏览器打开,就能看到实现效果。
******************************************************************/
// canvas的绘图环境
var ctx;
// 边长
const LENGTH=540;
// 舞台对象
var stage;
//-------------------------------
// 初始化
//-------------------------------
function init(){
// 获得canvas对象
var canvas=document.getElementById('myCanvas');
canvas.width =LENGTH;
canvas.height=LENGTH;
// 初始化canvas的绘图环境
ctx=canvas.getContext('2d');
ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央
// 准备
stage=new Stage();
stage.init();
// 开幕
animate();
}
// 播放动画
function animate(){
stage.update();
stage.paintBg(ctx);
stage.paintFg(ctx);
// 循环
if(true){
window.requestAnimationFrame(animate);
}
}
// 舞台类
function Stage(){
this.angle=0;
this.points=[];
// 初始化
this.init=function(){
for(let i=0;i<5;i++){
let x=Math.random()*220-110;
let y=Math.random()*220-110;
let point={};
point.x=x;
point.y=y;
this.points.push(point);
}
// 测试点
/*this.points.push({x:50,y:50});
this.points.push({x:50,y:-50});
this.points.push({x:-50,y:50});
this.points.push({x:-50,y:-50});*/
}
// 更新
this.update=function(){
// 旋转棒角度累加
this.angle+=Math.PI/720;
// 旋转棒角度变换
if(this.angle>2*Math.PI){
this.angle=0;
}
}
// 画背景
this.paintBg=function(ctx){
ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏
ctx.beginPath();
ctx.arc(0,0,260,0,2*Math.PI,true);
ctx.closePath();
ctx.clip();
// 渐变色背景
var gnt=ctx.createLinearGradient(-LENGTH/2,-LENGTH/2,-LENGTH/2,LENGTH);
gnt.addColorStop(0,"rgb(0,15,30)");
gnt.addColorStop(1,"rgb(28,58,94)");
ctx.fillStyle=gnt;
ctx.fillRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);
// 圈外角度
for(let i=0;i<36;i++){
let theta=i*10*Math.PI*2/360-Math.PI/2;
const r=245;
let x=r*Math.cos(theta);
let y=r*Math.sin(theta);
ctx.fillStyle="rgb(180,206,233)";
ctx.font="11px Bahnschrift Condensed";
ctx.textAlign="center";
ctx.textBaseLine="Middle";
ctx.fillText((i*10).toString().padStart(3, '0'),x,y+6);// 左补零
}
// 蓝外圈
ctx.strokeStyle="rgb(55,123,184)";
ctx.lineWidth=3;
ctx.beginPath();
ctx.arc(0,0,230,0,2*Math.PI,true);
ctx.closePath();
ctx.stroke();
// 黑外圈
ctx.strokeStyle="rgb(0,0,2)";
ctx.lineWidth=4;
ctx.beginPath();
ctx.arc(0,0,225,0,2*Math.PI,true);
ctx.closePath();
ctx.stroke();
// 白外圈
ctx.strokeStyle="rgb(209,248,253)";
ctx.lineWidth=1;
ctx.beginPath();
ctx.arc(0,0,221,0,2*Math.PI,true);
ctx.closePath();
ctx.stroke();
// 画经线
for(let i=0;i<18;i++){
let theta=i*10*Math.PI*2/360;
const r=221;
let x1=r*Math.cos(theta);
let y1=r*Math.sin(theta);
let x2=r*Math.cos(theta+Math.PI);
let y2=r*Math.sin(theta+Math.PI);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.lineWidth=0.5;
ctx.strokeStyle="rgb(92,178,255)";
ctx.stroke();
}
// 画纬线
for(let i=1;i<17;i++){
let r=i*13;
ctx.strokeStyle="rgb(92,178,255)";
ctx.lineWidth=0.5;
ctx.beginPath();
ctx.arc(0,0,r,0,2*Math.PI,true);
ctx.closePath();
ctx.stroke();
}
// 画辐射状半透明蒙版
var gnt=ctx.createRadialGradient(0,0,0,0,0,200);
gnt.addColorStop(0,"rgba(92,178,255,0)");
gnt.addColorStop(1,"rgba(0,0,0,0.5)");
ctx.fillStyle=gnt;
ctx.beginPath();
ctx.arc(0,0,220,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
// 圈内尖牙
for(let i=0;i<36;i++){
let theta=i*10*Math.PI*2/360-Math.PI/2;
const r=221;
let x=r*Math.cos(theta);
let y=r*Math.sin(theta);
ctx.save();
ctx.translate(x,y);
ctx.rotate(theta);
if(i % 9==0){
// 大牙
ctx.beginPath();
ctx.moveTo(0,-6);
ctx.lineTo(-30,0);
ctx.lineTo(0,6);
ctx.closePath();
}else{
// 小牙
ctx.beginPath();
ctx.moveTo(0,-3);
ctx.lineTo(-15,0);
ctx.lineTo(0,3);
ctx.closePath();
}
ctx.fillStyle="rgb(92,178,255)";
ctx.fill();
ctx.restore();
}
}
// 画前景
this.paintFg=function(ctx){
let x=Math.cos(this.angle)*219;
let y=Math.sin(this.angle)*219;
// 45°雷达扫描角
// 渐变的效果是一度画一个小扇形,扇形的逐渐透明化,用rgba中的第四个量alpha值控制
for(var i=0;i<45;i++){
var startAngle=this.angle-Math.PI/4/45*i;// 起始角度
var endAngle=startAngle-Math.PI/4/45;// 中止角度
var alpha=0.9-0.9/45*i;// 透明度
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, 220, startAngle, endAngle,true);
ctx.closePath();
ctx.fillStyle = "rgba(147,255,147,"+alpha+")";
ctx.fill();
}
this.points.forEach(function (pt, i) {
let anglePt=Math.atan2(pt.y, pt.x);
// Math.atan2出来的值需要修正
anglePt=(anglePt + Math.PI) % (2 * Math.PI) - Math.PI;
if(pt.y<0){
anglePt+=Math.PI*2;
}
let start=stage.angle-Math.PI/4;// 起始角
let end=stage.angle;// 中止角
//console.log("Start:"+start+" Curr:"+anglePt+" end:"+end);
if(anglePt>start && anglePt<end){
// 在雷达扫描角度内是绿圈
ctx.strokeStyle="#53FF53";
ctx.beginPath();
ctx.arc(pt.x, pt.y, 2, 0, 2*Math.PI,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(pt.x, pt.y, 4, 0, 2*Math.PI,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(pt.x, pt.y, 6, 0, 2*Math.PI,true);
ctx.closePath();
ctx.stroke();
}else{
// 在雷达扫描角度内是蓝圈
ctx.strokeStyle="rgb(32,114,200)";
ctx.beginPath();
ctx.arc(pt.x, pt.y, 3, 0, 2*Math.PI,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(pt.x, pt.y, 5, 0, 2*Math.PI,true);
ctx.closePath();
ctx.stroke();
}
});
}
}
/*--------------------------------------------------------------------------
《理想与人》
任何人都可能随时抛弃理想,
理想从不曾抛弃任何人;
它像深空中的星眼,
一直在静静地注视着你。
--------------------------------------------------------------------------*/
//-->
</script>
END