浅谈canvas绘画王者荣耀--雷达图

来源:转载

背景

yabo亚博真人娱乐一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息。原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画。那么问题来了,已经好久没有使用canvas绘画了东西。

SO,就想自己画一个canvas雷达图,顺便重新回顾一下canvas的知识点。

王者荣耀雷达图的基本构成。

聊天记录当中的雷达图不是特别清楚,所以我这边截图了自己的一个战绩雷达图。

是不是有被我的战绩吓到了,害不害怕!

好了扯远了,让我们回到正题上来。

通过截图上面的雷达图基本主体是一个正六边形,每个顶点则配有相应的文字说明。

然后就是中间红色区域部分则由对角线上的点,连成一圈填充构成。因此这里我们称它为数据填充区

所以这个雷达图我们分为三步来完成。

①正六边形

②数据填充区

③绘制文本

正六变形的坐标点解析

在绘画这个正六边形的时候,先让我们对于这个正六边形进行简单的数学分析。

这里先用画板画一个正六变形,然后进行切割并切角。

是吧,借用以前高中还是初中的数学,正六边形的内角和720°,那么每一个对角就是120°。在已知对角线的长度。那么通过sin60°cos60°一类的,那个可以求出各个三角形的边长。

可是问题来了,这里我们要计算的是各个坐标点。而canvas的坐标轴是从左上角算(0,0)原点的单象限坐标轴。假设六边形的中心点是(250,250)、对角线的长度是100*2,那么按照三角函数推断:

bottom-center坐标:(250, 250 + 100)

bottom-left坐标:(250 - 100*sin(60°), 250+100*cos(60°))

top-left坐标:(250 - 100*sin(60°), 250-100*cos(60°))

top-center坐标:(250, 250 - 100)

top-right坐标:(250 + 100*sin(60°), 250-100*cos(60°))

bottom-right的坐标:(250 + 100*sin(60°), 250+100*cos(60°))

坐标是出来了,但是一个点一个点去绘画是不是有点太low了!

肿么办?

啦啦啦啦!

那么就到了我们找规律的时间来了!

但是在找规律的同时,为毛中心点的X轴和别人不一样,为毛一会加一会减。

所以当思考各坐标点参数的规律的时候,让先回顾以前的函数角度图表

看完这个函数参照图之后,让我再次修改一下6个点的书写方式。

bottom-center坐标:(250 + 100*sin(0°), 250 + 100*cos(0°))

bottom-left坐标:(250 + 100*sin(300°), 250+100*cos(300°))

top-left坐标:(250 + 100*sin(240°), 250-100*cos(240°))

top-center坐标:(250 +100*sin(180°), 250 + 100*cos(180°))

top-right坐标:(250 + 100*sin(120°), 250-100*cos(120°))

bottom-right的坐标:(250 + 100*sin60°), 250+100*cos(60°))

这个时候再看组坐标数据点,是不是感觉有点意思!

那么这个时候我们便可以通过一个for循环,用一个数组把这6个坐标点给记录下来。

var pointArr = [];

for (var i = 0; i < 6; i++) {

pointArr[i] = {};

pointArr[i].x = 250 + 100 * Math.sin(60 * i);

pointArr[i].y = 250 + 100* Math.cos(60 * i);

}

1.1 绘画正六边形

前面既然,将正六边形的坐标点通过一个for循环解析出来。那么就是代码绘画正六边形了:

分享给朋友:
您可能感兴趣的文章:
随机阅读:
栏目列表
推荐内容