今天来讲解“雷达扫描”效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下。

效果图

demo链接:https://win7killer.github.io/demo_set/html_demo/canvas/can_demo/radar.html

********************************************************************

这个东西,背景圆,坐标、圆圈都很简单实现,arc结合moveTo、lineTo就可以解决,背景色也不是问题,一句带过。

那么,有挑战的地方,就是这个扫描的东西

特点:

1、旋转

2、渐变

开始实现:

1、误入歧途

首先考虑了过渡色,实现过渡色之后,只需要旋转canvas,恩,完美~(头脑简单的例子,后边发现这思路行不通)

step1. *过渡色*

过渡色只有“线性过渡”、“辐射过渡(环形过渡)”,而这个效果需要的是一种类似于“扇形侧面过渡”(木有这种过度,我瞎叫的)。环形过渡并不满足需求,只能考虑线性过渡。

考虑到canvas路径的填充(fillStyle)可以使用过渡色对象,先实现第一帧的过渡,开搞。

代码如下:

 var grd  = ctx.createLinearGradient(175,100,can.width,150);

 grd.addColorStop(0,"rgba(0,255,0,0)");
grd.addColorStop(1,"rgba(0,255,0,1)");

然后绘制一个扇形,去填充

 ctx.fillStyle = grd;
ctx.beginPath();
ctx.moveTo(150,150);
ctx.arc(150, 150, 150, -90/180*Math.PI, 0/180*Math.PI);
ctx.fill();

加上背景色

 ctx.fillStyle = 'rgba(0,0,0,1)';
ctx.strokeStyle = 'rgba(0,255,0,1)'; ctx.arc(150,150,150,0,2*Math.PI);
ctx.fill();

效果图如下:

还算有那么点样子哦~,接下来就是让它动起来

step2. *旋转*

旋转思路:旋转点在canvas的中心点,围绕中心点旋转,然后不停的绘制扫描区的扇形。

用了之前的旋转函数

 function drawRotate(deg, fn) {
ctx.save();
ctx.translate(can.width/2, can.height/2);
ctx.rotate(deg);
fn && fn(ctx);
ctx.restore();
}

但是!!!!真的转起来的时候,问题来了。

扇形的旋转完美,没问题,说明这个旋转函数也没问题。

问题出在过渡色身上。。。

过渡色创建的时候,走向是固定的,在渲染到扇形后,依旧是一样的走向(扇形每次都要重绘),导致出现错误的结果。

由于原来的错误代码不全了,所以就没图给大家看了。大家可以自己试一下。

有考虑到在旋转的过程中去改变过渡色走向,但是涉及到比较繁琐的计算,还是放弃了(比较懒,如果真的去算位置,应该是可以达到效果的)。

于是放弃,去吃午饭了,大脑肯定是去能量了。

2、迷途折返

午饭过后,继续思考,换思路。

经过考虑,想起以前做“字幕雨”(类似黑客帝国)的思路来。

附: 字幕雨链接:https://win7killer.github.io/demo_set/html_demo/canvas/text_rain.html

思路如下:

整体思路变化,先处理旋转,再处理过渡。

step1.  旋转

以小角度(1°-5°)绘制纯色的扇形,没错,就是纯色的,不要过渡色,然后旋转,以保证扫描区前边亮色。这样,旋转一周,会r让整个雷达高亮。

注意,这里的旋转不再是旋转canvas,而是不断改变绘制扇形的角度。

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

step2.  *扇形*

然后,处理过渡。仔细考虑, 这个并不是“过渡色”效果,真的不是,而是“渐进消隐”效果,就是出现后高亮,慢慢消失的效果。

此类“渐进消隐”效果的做法,很简单,用rgba半透明色(饱和度1的时候与背景色相同)填充整个canvas,一层一层覆盖上去,就会得到慢慢消失的效果。

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

在整个loop中先去覆盖之前的,然后去重绘坐标、圆环等,重绘该改变角度的扇形,就达到了效果,完美。

最终整体代码如下:

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>radar</title>
<style>
canvas {
margin: 20px auto;
display: block;
}
</style>
</head> <body>
<canvas id="can" width=300 height=300></canvas> <script type="text/javascript">
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();
</script>
</body> </html>

  

至此,完成效果,符合预期,完美~

****************************************************

感谢各位收看,下期再见~~~

【canvas系列】canvas实现"雷达扫描"效果的更多相关文章

  1. canvas实现"雷达扫描"效果

    今天来讲解“雷达扫描”效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/can_demo/de ...

  2. html 类似雷达扫描效果 及 闪屏效果

    //雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> css: .RadarFast{ p ...

  3. TWaver动画之雷达扫描效果

    UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI.在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣.做安全和监控的项目中经 ...

  4. cesium 飞线 瓣体传感器(雷达扫描) 效果

    参考:github地址 本人新手,npm webpack 这些还是一知半解,只记录自己得到成功结果的操作步骤,可能存在多余或错误的步骤. 1.github 把代码下载下来,解压. 2.webstorm ...

  5. 【Flutter 实战】自定义动画-涟漪和雷达扫描

    老孟导读:此篇文章是 Flutter 动画系列文章第五篇,本文介绍2个自定义动画:涟漪和雷达扫描效果. 涟漪 实现涟漪动画效果如下: 此动画通过 CustomPainter 绘制配合 Animatio ...

  6. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/can_demo/demo/draw_rol ...

  7. 【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】

    标题很难引人入胜,先放个效果图好了 如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...

  8. 【canvas系列】用canvas实现一个colorpicker

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  9. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

随机推荐

  1. IP地址和硬件地址 ARP协议

    ip地址使用在网络层以上,是一个逻辑地址,物理地址是数据链路层和物理层使用的 在发送数据的时候,数据是从上层往下层发送的,通过tcp报文->ip数据报->mac数据帧 IP地址放在数据报的 ...

  2. Java模拟新浪微博登陆抓取数据

    前言:  兄弟们来了来了,最近有人在问如何模拟新浪微博登陆抓取数据,我听后默默地抽了一口老烟,暗暗的对自己说,老汉是时候该你出场了,所以今天有时间就整理整理,浅谈一二. 首先:  要想登陆新浪微博需要 ...

  3. Qt 中QString 字符串操作:连接、组合、替换、去掉空白字符

    Qt中的字符串类 QString类 保存了16位Unicode值,提供了丰富的操作.查询和转换等函数. QString 字符串有如下几个操作符: (1) "+" 用于组合两个字符串 ...

  4. android列表停止滚动,加载图片,较为通用的一种办法

    在Adapter的itemView里面,判断列表是否在滚动中,其实是比较麻烦的,可能耦合性会比较严重. 所以考虑了下,是否能在itemView里面,检测列表的滚动状态,并监听停止状态加载图片,实现it ...

  5. Linux实战教学笔记17:精简shell基础

    第十七节 精简shell基础 标签(空格分隔): Linux实战教学笔记 1,前言 1.1 为什么学习shell编程 Shell脚本语言是实现Linux/UNIX系统管理及自动化运维所必备的重要工具, ...

  6. iOS使用StroryBoard页面跳转及传值

    之前在网上iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思想 ...

  7. 卷积神经网络(CNN)模型结构

    在前面我们讲述了DNN的模型与前向反向传播算法.而在DNN大类中,卷积神经网络(Convolutional Neural Networks,以下简称CNN)是最为成功的DNN特例之一.CNN广泛的应用 ...

  8. Tesseract pytesseract的安装和使用

    Tesseract是开源的OCR引擎,可以识别的图片里的文字,支持unicode(UTF-8)编码,100多种语言,需要下载相应语言的训练数据. 安装: 有两种方法,一种是通过编译源码,比较麻烦.我使 ...

  9. ERP实施顾问是干什么的?

    ERP实施序列的人员,统称为ERP实施顾问. ERP实施顾问“是把公司的ERP实施作为己任,并投入大量的人力和财力以实现这一目标的群体”.他们精通ERP理论与ERP软件的使用方法,熟练运用项目实施方法 ...

  10. 大型ERP系统在线体验

    ERP简单说明: AIO7构建了基于SOA三层架构的管理软件平台.客户通过网络即可得到ERP服务,不用安装服务器.不用建立数据中心.不用安装软件.无需专业IT支持,任何上网设备就可以使用高性能.功能集 ...