分析一下需求
这个图好像叫雷达图，那我们先去看 echarts，简直不要太像好吗？
小韭菜没给我反应的机会提出了另一个想法：简单一点
简单一点，我又想起了 Vue官网 有这个东西。
小韭菜看都没看就说：不用 Vue
What？我只是让你看看原理啊。那好吧，我看了一眼，就是 svg 实现
SVG 实现雷达图
jsrun测试地址，如果 jsrun 挂了，可以去我个人网站上看测试地址。
<svg width="200" height="200" class="demo-svg warp"> <polygon points="100,10.899999999999991 175.32367609057616,75.52585404550416 145.49457852743743,162.61791536462093 71.43363673858582,139.31822592662246 41.795341202736594,81.08815994425322" class="demo-polygon" style="fill: #41B883;"></polygon> </svg>
SVG 的 polygon
<polygon> 标签用来创建含有不少于三个边的图形。
points 属性定义多边形每个角的 x 和 y 坐标
那我们来看上面的图片，正好五个角，那我们就可以动手改改。简单的一匹
100,10.899999999999991 175.32367609057616,75.52585404550416 145.49457852743743,162.61791536462093 71.43363673858582,139.31822592662246 41.795341202736594,81.08815994425322
实现下载雷达图
因为快下班了，小韭菜看了一眼说搞定。然后又提出了一个需求，下载这个图片。我一想简单的一匹啊。我前两天才写了文章的 前端培训-初级阶段-场景实战（2019-06-06）-下载文件&下载进度
- 小韭菜之前用过
html2canvas还是啥来着。直接这样搞
download直接下载（svgToDataurl）
svgToCanvas然后下载canvas的图片
canvas的toBlob结合URL.createObjectURL和download
canvas的toDataUrl结合download
为啥我上面写了这么多的方法。
因为移动端不好使。不好使的原因就是 DataURL 和 BlobURL 在移动端（微信、QQ、QQ浏览器）无法下载。
SVG 怎么用 img 显示
这个还是当时在张鑫旭张大师哪里看到的方法。
SVGTODataURLdata:image/svg+xml,%3Csvg xmlns='http://w
这样我们就可以显示了。
download 直接下载
上面我们显示了出来，直接下载吧。nonono，因为上面的 Dataurl 是 svg 格式的，下载也是 SVG 格式的。
所以我们需要用 img 读取 svgurl。然后 canvas 读取 img 。然后 canvas 输出想要的图片格式。然后再下载。
download 无法使用，那我们怎么办呢？
- PC端，走 download 。
- 移动端，走 长按保存图片。
总结步骤
- SVG 生成雷达图。（实现效果）
- SVG to DataUrl。（为了让 img 可以加载）
- img 加载 DataUrl。（为了让 canvas 可以加载）
- canvas 加载 img。（为了改变输出格式）
- canvas toDataUrl。（改变输出格式为图片格式）
- 分情况支持下载
- 移动端 图片长按下载
- PC端 download下载
问题：如果计算对应的点
假设我们要做的是 五角形，宽高都是 200px。各项能力都是 0-100%。
- 中心点为
100,100
- 我们先平分五份
360/5 = 72
- 通过上面的我们可以把我们问题变为已知圆心、线段点&长度（百分比*0度的最长边）、和旋转角度（每项能力是72），求旋转点坐标。如下，已知 A、B 点坐标，BAC角度求C点坐标。
- 或者说计算圆上任意一点
圆点坐标：(100,100)，半径：100，角度：72
圆上任一点为：（x1,y1）
x1 = 100 + 100 * Math.cos(72 * Math.PI /180) //x1=x0+r*cos(ao*3.14/180) y1 = 100 + 100 * Math.sin(72 * Math.PI /180) //y1=y0+r*sin(ao*3.14/180)
