canvas 绘制动态雷达图

最近收到一个需求，需要做一个预定的动态雷达图，于是绞尽脑汁，基于canvas 终于实现如图的效果：

图片效果：

我是基于vue 来实现的，现在让我们看看具体是如何实现的：

1.需要使用canvas 画出静止的样式

这里就需要用到canvas 的知识点，实现的代码如下：

     this.time += 1this.ctx.drawImage(this.canvasImgBg, -(this.ww / 2) - 15, -(this.wh / 2) - 20, this.ww + 10, this.wh + 27)this.ctx.beginPath()this.ctx.rect(-2000, -2000, 4000, 4000)this.ctx.fill()this.ctx.strokeStyle = 'rgba(255,255,255,0.1)'this.ctx.strokeStyle = this.Color(1)var r = this.ww / 2.29var line_deg = (this.time / 2) % 360var line_deg_len = 100for (var i = 0; i < line_deg_len; i++) {// var deg = (time-i);var deg1 = line_deg - i - 1var deg2 = line_deg - ivar point1 = this.Point(r, deg1)var point2 = this.Point(r, deg2)var opacity = 1 - i / line_deg_len - 0.3if (i === 0) opacity = 1this.ctx.beginPath()this.ctx.fillStyle = 'white'this.ctx.fillStyle = this.Color(opacity)this.ctx.moveTo(0, 0)this.ctx.lineTo(point1.x, point1.y)this.ctx.lineTo(point2.x, point2.y)// ctx.stroke();this.ctx.fill()}

2.画出随机位置的图标和名字

const radius = this.ww / 42this.globalRadius = radiusthis.originEnemiesList.map(obj => {const avatar = new Image()avatar.src = obj.userInfo.avatarvar obj_point = this.Point(obj.r, obj.deg)this.ctx.save()this.ctx.beginPath()this.ctx.arc(obj_point.x, obj_point.y, radius, 0, 2 * Math.PI)obj.point = obj_pointthis.ctx.textAlign = 'center'this.ctx.font = 'bold 12px PingFang SC'this.ctx.fillStyle = this.Color1(obj.opacity)this.ctx.fillText(obj.userInfo.fullName, obj_point.x, obj_point.y + radius + 20)this.ctx.clip() // 裁剪上面的圆形this.ctx.globalAlpha = obj.opacitythis.ctx.drawImage(avatar, obj_point.x - radius, obj_point.y - radius, 2 * radius, 2 * radius)this.ctx.restore() // 还原状态this.ctx.strokeStyle = this.Color1(obj.opacity)this.ctx.stroke()if (Math.abs(obj.deg - line_deg) <= 1) {obj.opacity = 0.8}this.ctx.strokeStyle = this.Color1(obj.opacity)this.ctx.lineWidth = 2this.ctx.beginPath()this.ctx.arc(obj_point.x, obj_point.y, (radius + 1) * (1 / (obj.opacity + 0.2)), 0, 2 * Math.PI)this.ctx.stroke()})

原理是：当扫描动起来，只有扫过以后，才能出现图标，所以默认一开始的图标都是隐藏的，即透明度为0，故下面的代码就是用来判断是否扫过

 if (Math.abs(obj.deg - line_deg) <= 1) {obj.opacity = 0.8}

3.让整体动起来

3.联系我

如需完整项目代码，请备注联系我，邮箱1015095073@qq.com

canvas 绘制动态雷达图相关推荐

h5页面的雷达图五边形_konva canvas插件写雷达图示例
最近,做了一个HTML5的项目,里面涉及到了雷达图效果,这里,我将react实战项目中,用到的雷达图单拎出来写一篇博客,供大家学习. 以下内容涉及的代码在我的gitlab仓库中: Konva canv ...
python画动图-Python绘制动态水球图过程详解
先来看看绘制的动态水球图: 没有安装PyEcharts的,先安装PyEcharts: # 安装pyecharts模块,直接安装就是最新的版本pip install pyecharts 安装好PyEch ...
python绘制雷达图代码实例-使用python绘制温度变化雷达图
本文实例为大家分享了python绘制温度变化雷达图的具体代码,供大家参考,具体内容如下假设某天某地每三个小时取样的气温为针对温度变化趋势绘制雷达图: 代码如下: import numpy as n ...
【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...
Python+Matplotlib绘制动态爱心图
函数FuncAnimation(fig,func,frames,init_func,interval,blit)是绘制动图的主要函数,其参数如下: a.fig 绘制动图的画布名称 b.func自定义动 ...
matplotlib绘制多个雷达图(包含多个子图)：给出四大国有银行2018年相关财务和监管指标的排名，要求将4家银行各项指标的排名绘制成雷达图并且以2x2子图的形式显示
给出四大国有银行2018年相关财务和监管指标的排名(见data.xlsx"第二题"工作表).要求将4家银行各项指标的排名绘制成雷达图并且以2x2子图的形式显示,效果如图所示. 其中 ...
ArcGIS API + Echarts 实现动态雷达图
雷达图(Radar Chart),又可称为戴布拉图.蜘蛛网图(Spider Chart),常用语财务报表中,但不限于财务报表.使用雷达图能让使用者能一目了然的了解各项指标的变动情形及其好坏趋向. EC ...
Android之绘制动态折线图
所谓动态折线图,就是折线图能随着手指的滑动进行动态绘制,这里很定会产生动画效果.基于这个效果,这里使用SurfaceView进行制图. 实现步奏如下: (1): 这里新建一个绘图ChartView,继 ...
canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...

canvas 绘制动态雷达图

canvas 绘制动态雷达图

1.需要使用canvas 画出静止的样式

2.画出随机位置的图标和名字

3.让整体动起来

3.联系我

canvas 绘制动态雷达图相关推荐

最新文章

热门文章