查看: 724|回复: 2

[HTML5动画] html5 canvas绘制动态能力分布图

[复制链接]
发表于 2019-8-28 22:53:26 | 显示全部楼层 |阅读模式
本帖最后由 大神神码 于 2019-8-28 22:57 编辑

前两天在群里看到一张图,图片如下,

20170522093652_30379.jpg

于是自己尝试了一下,用canvas看能否动态绘制能力分布图,以下是我的思路,有不足之处还望老司机们多多指教;

可以自定义参数如下:

20170522094008_47026.png

废话不多说,先上效果图:

20170522093744_85090.gif
1、首先是绘制多边形,现在画布中心绘制圆形,然后在园中动态获取多边形的顶点,然后使用lineTo()方法绘制正多边形;效果图如下:

20170521215433_99570.png

2、为了有层次感,需要再绘制两个小的正多边形,而且这几个多边形是需要有透明度的,如下图:

20170521220622_95554.png

3、依次绘制对角线及最外层图标,如下图

20170521222403_72372.png

5、然后就是绘制橙色能力部分以及所有能力之和的均值;如下图

20170521223122_84273.png

6,最后就是使用setTimeout或者requestAnimationFrame实现动画效果;

存在问题:

1、当绘制图形为偶数边多边形时,小图片下的介绍文字会显示不完全,如下图:

20170521225206_82352.png

主要原因是偶数边多边形能的图标有分布在canvas的正下方区域,解决办法是适当调整图标所在圆形的半径(iconsRadius)和中心三个多边形的半径(polygons  > radius);

2、绘制图在移动端会显示失真,图标显示会稍微不清楚;如下图:暂时没有找到解决办法

20170521225529_59260.png



源码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 2019-8-29 14:52:31 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2019-9-8 22:08:59 | 显示全部楼层
很多很多很多!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表