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

项目中因为需要制作雷达效果，雷达扇形区域需要根据参数设置不同角度，并且是透明渐变的，首先想到了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>

雷达图片：

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

利用Canvas绘制雷达图
雷达图(蜘蛛网图)是一种常见的数据分析图表,本文采用canvas来绘制雷达图,并最终封装成一个小组件.首先来看一下最终的效果图: 如何画正多边形以正五边形雷达图为例(其他任意正多边形也一样),如下图 ...
html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
html5雷达图绘制,Canvas 绘制雷达图
最近做的一个需求,场景之一是绘制一个雷达图,找了一圈,似乎 AntV 下的 F2 很适合拿来主义: 但是接着又考虑了一下,我当前所做的项目并不是可视化项目,今后大概率也不会有这种可视化图表的需求,只是 ...
canvas绘制雷达图
最近做的一个需求,场景之一是绘制一个雷达图,找了一圈,似乎 AntV 下的 F2 很适合拿来主义: 但是接着又考虑了一下,我当前所做的项目并不是可视化项目,今后大概率也不会有这种可视化图表的需求,只是 ...
HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...
java 画笔粗细,javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
html画布画笔粗细,基于javascript html5 canvas实现可调画笔颜色/粗细/橡皮的涂鸦板...
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. javascri ...
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板 <!doctype html> <head> <meta http-equiv= ...
canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...

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

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

最新文章

热门文章