canvas 雷达搜索

这个狂拽炫酷叼渣天的h5简直亮瞎我的24k钛合金眼，一个canvas就已足够把我蹂躏得不要不要的了，一直觉得css3写的雷达不是特别满意，今日用canvas写的总算入眼了。。。
（此文用到的都为canvas的基础API，在此不做详细解释）

效果图

A55B06856CDDBEDE33EAF834B193D35A.gif

雷达结构分析

如图，结构大体分为两部分，闪点和背景图（包括扇形扫描区域）；

<div id="canv">
    <canvas id="scanThread" height="420" width="420">浏览器不支持canvas,请更换</canvas>
    //闪点
    <div class="random"></div>
    <div class="random"></div>
    <div class="random"></div>
</div>
<style>
    #canv {
        position: relative;
        width: 420px;
        height: 420px;
        margin: 0 auto;
        border-radius:50%;
    }
    #scanThread{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin:10px auto;
    }
    .random{
        width: 30px;
        height: 30px;
        background: #99f85a;
        position: absolute;
        border-radius:50%;
        box-shadow: 0 0 50px 10px  #fff;
    }
</style>

背景图分析

背景图分为两大块来写，底图和扫描扇形

// 获取 canvas
    var ctx = document.querySelector("#scanThread").getContext("2d"),
            marginTop=10,
            marginLeft=10,
            x = 200+marginTop,
            y=200+marginLeft,
            t=0;

canvas画背景

 (function scanThread(){
        if(t>160) t = 0;

        //雷达屏幕背景
        ctx.fillStyle = 'rgba(0,0,0,0.1)';
        ctx.beginPath();
        ctx.arc(x,y,200,0,Math.PI*2,false);
        ctx.fill();

        // 雷达圈圈
        ctx.strokeStyle = 'rgba(0,200,0,0.8)';
        ctx.lineWidth = 3.0;
        //'十'字架
        //横线
        ctx.beginPath();
        ctx.moveTo(x, marginTop); // 起点
        ctx.lineTo(x, y*2-marginTop); //终点
        ctx.stroke(); // 描边
        //竖线
        ctx.beginPath();
        ctx.moveTo(marginLeft, y);
        ctx.lineTo(x*2-marginLeft, y);
        ctx.stroke();

        //4个圆圈
        for (var i=1;i<5;i++){
            ctx.beginPath();
            ctx.arc(x,y,50*i,0,Math.PI*2,false);
            ctx.stroke();
        }

        ctx.fillStyle = 'rgba(0,200,0,1)';
        ctx.beginPath();
        ctx.arc(x,y,8,0,Math.PI*2,false);
        ctx.fill();

        //扫描动画
        ctx.fillStyle = 'rgba(0,200,200,0.95)';
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(t++ * (Math.PI/80));
        ctx.beginPath();
        //这里巨坑呀，由于translate移动了中心点,so坐标应按移动后的计算
        ctx.arc(0, 0, 200, 1.98*Math.PI, 0, false);
        //没有这句只是个弧形，连接原点成为扇形
        ctx.lineTo(0,0);
        ctx.fill();
        ctx.restore();
        window.setTimeout(scanThread, 1000 / 60);//60帧
    })();

以上重点在于扫描动画，残影效果可以利用移动速度过快，视觉效果便形成残影，而无需专门用代码去写阴影，况且canvas的扇形阴影或渐变并不是那么好写的。

闪点

闪电随机定位到canvas画布上，不能超出，带bulingbuling哦

(function addPoint(){
        //此处为随机数为300即可，可根据需求自行更改
        $(".random").eq(0).css({"left" : random(300) , "top" : random(300) });
        $(".random").eq(1).css({"left" : random(300) , "top" : random(300) });
        $(".random").eq(2).css({"left" : random(300) , "top" : random(300) });

        window.setInterval(function () {
            var state = $(".random").css('display');
            if (state=='none') {
                $(".random").show();
            } else {
                $(".random").hide();
            }
        }, 800);
    })();
    //获取随机数（50 ， num＋50）
    function random(num){
        return Math.ceil(Math.random()*num+50);
    }