基本信息
源码名称：雷达扫描效果（canvas）
源码大小：2.40KB
文件格式：.html
开发语言：CSS
更新时间：2019-03-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍

雷达扫描 

<!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>