摘要：前天，快下班的时候，一朋友发来一个战绩图。然后又提出了一个需求，下载这个图片。我前两天才写了文章的前端培训初级阶段场景实战下载文件下载进度小韭菜之前用过还是啥来着。不好使的原因就是和在移动端微信浏览器无法下载。移动端，走长按保存图片。
前天，快下班的时候，一朋友发来一个战绩图。
这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。
结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始
这个图好像叫雷达图，那我们先去看 echarts，简直不要太像好吗？
小韭菜没给我反应的机会提出了另一个想法：简单一点
简单一点，我又想起了 Vue官网 有这个东西。
小韭菜看都没看就说：不用 Vue
What？我只是让你看看原理啊。那好吧，我看了一眼，就是 svg 实现
jsrun测试地址，如果 jsrun 挂了，可以去我个人网站上看测试地址。
SVG 的 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浏览器）无法下载。
这个还是当时在张鑫旭张大师哪里看到的方法。
SVGTODataURL data:image/svg+xml,%3Csvg xmlns="http://w
这样我们就可以显示了。
上面我们显示了出来，直接下载吧。nonono，因为上面的 Dataurl 是 svg 格式的，下载也是 SVG 格式的。
所以我们需要用 img 读取 svgurl。然后 canvas 读取 img 。然后 canvas 输出想要的图片格式。然后再下载。
PC端，走 download 。
移动端，走 长按保存图片。
总结步骤SVG 生成雷达图。（实现效果）
SVG to DataUrl。（为了让 img 可以加载）
img 加载 DataUrl。（为了让 canvas 可以加载）
canvas 加载 img。（为了改变输出格式）
canvas toDataUrl。（改变输出格式为图片格式）
分情况支持下载
移动端 图片长按下载
PC端 download下载
测试地址
更新:计算点：2019年6月10日09:42:14时间：2019年6月10日09:42:14
问题：如果计算对应的点
假设我们要做的是 五角形，宽高都是 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)
有点汗颜，全都还给老师了。忘的真是干干净净
微信公众号：前端linong文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104473.html
摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明（菜鸟请进，大神绕道 ~） 前端...
摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】 说明（菜鸟请进，大神绕道 ~） 前端...
摘要：用于将及其状态转化为可序列化的数据结构并添加唯一标识则是将记录的数据结构重建为对应的。用于记录中的所有变更则是将记录的变更按照对应的时间一一重放。表示观察变动时，是否需要记录变动前的属性值。该方法返回变动记录的数组。 摘要： 网页应该如何录屏呢？ 作者：Winty 原文：用户行为录帧调研 Fundebug经授权转载，版权归原作者所有。 关键点 首先，每一次会话都有一个唯一的s...
摘要：目前已经在运行的线上前端监控系统代码和讲解都放在这篇文章里监控系统介绍及代码用户对前端程序员来说，就是一个黑匣子。 摘要： 通过录屏或者截图，快速复现BUG场景。 作者：一步一个脚印一个坑 原文：搭建前端监控系统（备选）Js截图上报篇 Fundebug经授权转载，版权归原作者所有。 PS：本文关于Fundebug录屏功能的内容有些不准确的地方，比如录屏并非通过截图实现的，录屏插件...
阅读 986·2021-09-26 09:46
阅读 1422·2021-09-06 15:00
阅读 574·2019-08-30 15:52
阅读 934·2019-08-29 13:10
阅读 1121·2019-08-26 13:47
阅读 1356·2019-08-26 13:35
阅读 1895·2019-08-23 18:38
阅读 608·2019-08-23 17:59
