canvas实现"雷达扫描"效果

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

效果图：

demo链接： https://win7killer.github.io/can_demo/demo/radar.html

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

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

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

特点：

1、旋转

2、渐变

开始实现：

1、误入歧途

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

step1.　*过渡色*

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

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

代码如下:

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

2

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

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

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

1 ctx.fillStyle = grd;

2 ctx.beginPath();

3 ctx.moveTo(150,150);

4 ctx.arc(150, 150, 150, -90/180*Math.PI, 0/180*Math.PI);

5 ctx.fill();

加上背景色

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

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

3

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

5 ctx.fill();

效果图如下：

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

step2. *旋转*

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

用了之前的旋转函数

1 function drawRotate(deg, fn) {

2     ctx.save();

3     ctx.translate(can.width/2, can.height/2);

4     ctx.rotate(deg);

5     fn && fn(ctx);

6     ctx.restore();

7 }

但是！！！！真的转起来的时候，问题来了。

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

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

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

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

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

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

2、迷途折返

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

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

附：字幕雨链接： https://win7killer.github.io/can_demo/demo/text_rain.html

思路如下：

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

step1.　旋转

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

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

1 function drawRadar(iDeg) {

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

3     ctx.beginPath();

4     ctx.moveTo(150, 150);

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

6     ctx.closePath();

7     ctx.fill();

8 }

step2. *扇形*

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

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

loop以下代码：

1 function cover() {

2     ctx.save();

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

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

5     ctx.fill();

6     ctx.restore();

7 }

在整个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,

};<br>

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>

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

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

<!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 aTarget = [];

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

        }

        function bornTarget() {

            aTarget.push({

                deg: Math.round(Math.random() * 360),

                r: Math.round(Math.random() * can.width / 2)

            });

        }

        init();

    </script>

</body>

</html>

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

【canvas系列】canvas实现"雷达扫描"效果
今天来讲解"雷达扫描"效果demo,来源于QQ群里边有群友说想要个雷达效果,就尝试写了一下. 效果图: demo链接: https://win7killer.github.io/c ...
html 类似雷达扫描效果及闪屏效果
//雷达扫描效果 1 <em id="Radar" class="RadarFast"></em> css: .RadarFast{ p ...
TWaver动画之雷达扫描效果
UI和功能是好的产品的两个重要因素,很多产品往往只注重功能上的设计,而忽略了UI.在这个“看脸”的时代,就算产品的功能很强大,如果UI跟不上步伐,你的产品都会在客户心中大打折扣.做安全和监控的项目中经 ...
cesium 飞线瓣体传感器(雷达扫描) 效果
参考:github地址本人新手,npm webpack 这些还是一知半解,只记录自己得到成功结果的操作步骤,可能存在多余或错误的步骤. 1.github 把代码下载下来,解压. 2.webstorm ...
【Flutter 实战】自定义动画-涟漪和雷达扫描
老孟导读:此篇文章是 Flutter 动画系列文章第五篇,本文介绍2个自定义动画:涟漪和雷达扫描效果. 涟漪实现涟漪动画效果如下: 此动画通过 CustomPainter 绘制配合 Animatio ...
OpenGL 画出雷达动态扫描效果(二) 非底图
OpenGL 画出雷达动态扫描效果(一)中给出了已一张图片作为底图的雷达扫面程序如果有漂亮的雷达底图的话,效果应该非常不错的,另外也可以直接手绘雷达框架效果如下雷达主体代码 glLineWidt ...
Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果
Android 高手进阶(21) 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处:http://blog.csdn.net/xiaanming/article/detail ...
【转】Android 基于google Zxing实现二维码、条形码扫描，仿微信二维码扫描效果--不错
原文网址:http://blog.csdn.net/xiaanming/article/details/10163203 转载请注明出处:http://blog.csdn.net/xiaanming/ ...
jQuery雷达扫描切换幻灯片代码
基于jQuery雷达扫描切换幻灯片代码.这是一款切换效果类似雷达扫描,支持鼠标滚轮滚动切换.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...

随机推荐

PEAR DB 事务相关
1.autoCommit().commit().rollback() function autoCommit($onoff=false) 指定是否自动提交事务.有的后端数据库不支持. function ...
ZOJ 3544 / HDU 4056 Draw a Mess（并查集好题）
方法参见:http://blog.acmol.com/?p=751 从最后一个线段开始倒着处理(因为之后的线段不会被它之前的线段覆盖),把这条线段所覆盖的所有线段编号合并到一个集合里,并以最左边线段编 ...
lua中是 ffi 解析【是如何处理数据包的/pkt是如何传进去的】 fsfsfs
lua中的ffi是如何解析的呢? 拿bcc中对proto的解析说起: metatype是有大学问的: ffi.metatype(ffi.typeof('struct ip_t'), { __index ...
分享下自己一直用的.NET SQLSERVER 封装类下自己写的DataHelper 操作类
一,概述: 这个DataHelper 类是基于我上个博客里发的SQLDataAccess 这个类做的一个简单的封装,为了结合自己的实体类和数据操作而产生的. 这里面用了属性类,反射.还有数据类型 ...
[洛谷P3978][TJOI2015]概率论
题目大意:对于一棵随机生成的$n$个结点的有根二叉树,所有不同构的形态等概率出现(这里同构当且仅当两棵二叉树根相同,并且相同节点的左儿子和右儿子都相同),求叶子节点个数的期望是多少? 题解:令$f_n ...
[poj] 1236 networks of schools
原题这是一道强连通分量板子题. 显然subtask1 是要输出入度为0的点的个数而subtask2,我们考虑一下最优一定是把一个出度为零的点连到入度为零的点上,这样我们要输出的就是max(出度为零 ...
BZOJ 1043 【bzoj1043】[HAOI2008]下落的圆盘 | 暴力么??
题目: 题解: 大概是黄学长的博客 #include<cstdio> #include<algorithm> #include<cstring> #include& ...
【转】去掉HTML5中number类型input字段的小箭头
第一种方案: 在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appea ...
BZOJ2879 [Noi2012]美食节【费用流】
题目 CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食节所有的美食.然而,尝鲜的欲望是难以满足的.尽管所有的菜品都很可 ...
大型C++项目必须注意的几个小问题
大型C++项目必须注意的几个小问题有些问题对于小型的C++项目来说可能无关紧要,但对于大中型C++项目来讲,这些问题却成了大问题.什么样的项目算是小型项目呢,什么样的算是大中型项目呢,我认为10万L ...

canvas实现"雷达扫描"效果

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

随机推荐

热门专题