vue 雷达扫描_雷达扫描效果（canvas）

【实例简介】雷达扫描

【实例截图】

【核心代码】

radar

canvas {

margin: 20px auto;

display: block;

}

var CFG = {

perDeg: 1,

};

var can = document.getElementById('can');

var ctx = can.getContext('2d');

var deg = 0;

ctx.strokeStyle = 'rgba(0,255,0,1)';

function init() {

ctx.fillStyle = 'rgba(0,50,0,1)';

ctx.arc(150, 150, 150, 0, 2 * Math.PI);

ctx.fill();

var raf = window.requestAnimationFrame(loop);

}

function loop() {

deg = (deg CFG.perDeg);

cover();

drawPosLine();

drawRadar(deg);

raf = window.requestAnimationFrame(loop);

}

function cover() {

ctx.save();

ctx.fillStyle = 'rgba(0,0,0,0.02)';

ctx.arc(150, 150, 150, 0, 2 * Math.PI);

ctx.fill();

ctx.restore();

}

function drawPosLine() {

ctx.beginPath();

ctx.moveTo(150, 0);

ctx.lineTo(150, 300);

ctx.closePath();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 150);

ctx.lineTo(300, 150);

ctx.closePath();

ctx.stroke();

ctx.moveTo(150, 150);

ctx.beginPath();

ctx.arc(150, 150, 100, 0 * Math.PI, 2 * Math.PI);

ctx.closePath();

ctx.stroke();

ctx.moveTo(150, 150);

ctx.beginPath();

ctx.arc(150, 150, 50, 0 * Math.PI, 2 * Math.PI);

ctx.closePath();

ctx.stroke();

}

function drawRadar(iDeg) {

ctx.fillStyle = 'rgba(0,200,0,.7)';

ctx.beginPath();

ctx.moveTo(150, 150);

ctx.arc(150, 150, 150, (-2 * CFG.perDeg iDeg) / 180 * Math.PI, (0 iDeg) / 180 * Math.PI);

ctx.closePath();

ctx.fill();

}

init();

vue 雷达扫描_雷达扫描效果（canvas）相关推荐

基于OpenGL的雷达P显的系统设计与仿真 PPI_雷达仿真_雷达模拟器_雷达目标_雷达ppi_PPI显示器_源码
基于OpenGL 开发的雷达P显可以设置各种参数源码下载链接 PPI_雷达仿真_雷达模拟器_雷达目标_雷达ppi_PPI显示器_源码-C++文档类资源-CSDN下载
java计算雷达扫描范围_雷达扫描 - linyinmobayu - 博客园
1.设计思想雷达扫描图,在影视作品中见到较多,比如飞机雷达.舰艇雷达,有一个扫描线转圈代表雷达一周旋转或一个批次的收发,发现目标就在表盘上标记位置.和汽车仪表盘类似,汽车仪表盘有底盘背景图.同圆.刻 ...
qca 指定频道扫描_如何扫描（或重新扫描）电视上的频道
qca 指定频道扫描 Gts/Shutterstock Gts /快门 So, you're trying to watch free over-the-air TV, but you can't ...
mimo雷达信号处理_雷达学术入门脉冲雷达信号处理概述
Reviewed by :@甜草莓 @Robert Zhou: 前置知识:概率论与统计学.面向人群:本科生.研究生/信号处理博士. 编者:对于信号处理来说,雷达和通信一直是一体两面,从MIMO通信到M ...
echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
python夹角余弦雷达图_雷达导论PART-II.1 无线电波与交变电流信号
今天开始进入第二篇-必要的准备知识,全部的篇章结构见我的第一篇文章"雷达导论引言".第二篇有3个章节,如下图所示,分别是第4章-无线电波与交变电流信号.第5章-用一种非数学的方法 ...
蓝牙扫描_无线扫描枪常见的传输模式及其区别
无线扫描枪常见的传输模式及其区别一.无线扫描枪主要传输模式 1.wifi传输,理论上覆盖面积较广,只要有中继器要传输多远都没问题. 2.蓝牙传输,蓝牙传输的特点就是适合所有的蓝牙设备,耗电量始中,兼 ...
信号扫描_微观世界扫描电子显微镜（SEM）
人类智慧促使着科技不断发展,从而开始了我们对于现存空间的无限探索. 大到宇宙苍穹,小到微观世界,我们沉醉于浩瀚星河的磅礴壮阔,也痴迷于微观材料世界的奇妙引力. 没有什么能阻挡我们探秘的步伐,今天,我们 ...
uniyu 雷达波束_雷达极化信息获取及极化信号处理技术研究综述
[1] Sinclair G.The transmission and reception of elliptically polarized waves[J].Proceedings of the ...

vue 雷达扫描_雷达扫描效果（canvas）

vue 雷达扫描_雷达扫描效果（canvas）相关推荐

最新文章

热门文章