canvas 绘制雷达效果：扇形区域颜色渐变渲染

最新推荐文章于 2024-08-08 19:28:29 发布

axiwang88

最新推荐文章于 2024-08-08 19:28:29 发布

阅读量2.1k

点赞数 1

分类专栏： canvas 文章标签： canvas 扇形渐变渲染

本文链接：https://blog.csdn.net/axiwang88/article/details/103815943

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目中因为需要制作雷达效果，雷达扇形区域需要根据参数设置不同角度，并且是透明渐变的，首先想到了canvas的线性渐变，在这里感谢此博主的文章：

https://www.cnblogs.com/ufex/p/6655336.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=464 height=464></canvas>
        <script type="text/javascript">
            var CFG = {
                initDeg:90,//扇形的初始角度
                perDeg: 1//每次旋转角度
            };
            var can = document.getElementById('can');
            var ctx = can.getContext('2d');
            var deg = 0;//记录已旋转角度

            //绘制开始和结束坐标
            var img = new Image();
            img.onload = function(){
                // 将图片画到canvas上面上去！
                ctx.drawImage(img,0,0,464,464);
            }
            img.src = "radar.png";

            function init() {
                var raf = window.requestAnimationFrame(loop);
            }

            function loop() {
                deg = (deg + CFG.perDeg);
                cover();
                drawRadar(deg);
                raf = window.requestAnimationFrame(loop);
            }

            function cover() {
                ctx.save();
                ctx.drawImage(img,0,0,464,464);
                ctx.restore();
            }

            function drawRadar(iDeg) {
                gradientFun(iDeg);
            }
            //渐变填充----保证渐变效果，可根据实际性能进行设置，线性渐变需要随时计算偏移，不稳定
            function gradientFun(iDeg){
                // 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)");
                var startopa = 0.1;//初始的透明度
                var endopa = 0.9;//结束的透明度
                var rad_step = 1;//渲染间隔度数-角度
                var sum_step = (CFG.initDeg/rad_step);//总共渲染次数
                var opa_step = (endopa-startopa)/sum_step;//透明度步进
                for(var i=0;i<sum_step;i++){
                    ctx.fillStyle = 'rgba(0,150,255,'+(startopa+opa_step*i)+')';
                    // console.log(ctx.fillStyle);
                    ctx.beginPath();
                    ctx.moveTo(232, 232);
                    ctx.arc(232, 232, 232, (-(CFG.initDeg*(1-i/sum_step)) + iDeg) / 180 * Math.PI, (-(CFG.initDeg*(1-(i+1)/sum_step)) + iDeg) / 180 * Math.PI);
                    ctx.fill();
                    ctx.closePath();
                }
            }
            init();
        </script>
    </body>
</html>

雷达图片：