前天，快下班的时候，一朋友发来一个战绩图。
这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。
结果，小韭菜问我，右边那个图怎么做？那好了，事情从这里开始
分析一下需求
这个图好像叫 雷达图 ，那我们先去看 echarts ，简直不要太像好吗？
小韭菜没给我反应的机会提出了另一个想法： 简单一点
简单一点，我又想起了 Vue官网 有这个东西。
小韭菜看都没看就说： 不用 Vue
What？我只是让你看看原理啊。那好吧，我看了一眼，就是 svg 实现
SVG 实现雷达图
jsrun测试地址 ，如果 jsrun 挂了，可以去我个人网站上看 测试地址 。
SVG 的 polygon
<polygon> 标签用来创建含有 不少于三个边 的图形。
points 属性定义多边形每个角的 x 和 y 坐标
那我们来看上面的图片，正好五个角，那我们就可以动手改改。 简单的一匹
100,10.899999999999991175.32367609057616,75.52585404550416145.49457852743743,162.6179153646209371.43363673858582,139.3182259266224641.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 显示
这个还是当时在 张鑫旭张大师 哪里看到的方法。
SVGTODataURL data: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下载
网友评论