前天快下班的时候，朋友发来一张记录图。这是给我打分的提议吗？（这位兄弟单手吊打亲友）。我坚决拒绝三连。结果小韭菜问我，右边的图怎么做？好吧，我们从这里开始分析需求。这个图好像叫雷达图，先看echarts。它看起来不太相似，对吗？小韭菜不给我反应的机会，又想出了一个主意：越简单越简单，我记得vue的官网上有这么个东西。小韭菜看都没看就说：不用Vue怎么办？我只是让你看看原理。嗯，我看了一下，就是svg实现svg实现雷达图jsrun测试地址，如果jsrun挂了，可以去我的个人网站看测试地址。SVG的polygon标签用于创建不少于三个边的图形。points属性定义多边形每个角的x和y坐标。Let'slookattheabovepicture,thereareexactlyfivecorners,thenwecanchangeitbyhand.简单的一匹100,10.899999999999991175.32367609057616,75.52585404550416145.49457852743743,162.6179153646209371.43363673858582,139.3182259266224641.795341202736594,81.08815994425322实现下载雷达图因为快下班了，小韭菜看了一眼说搞定。然后请求下载这张图片。我想到了一个简单的。前两天刚写的文章前端实训-初级阶段-场景实战(2019-06-06)-下载文件&下载进度小韭菜之前用过html2canvas什么的。像这样直接下载，直接下载(svgToDataurl)svgToCanvas然后下载canvas的图片，结合canvas的toBlob和URL.createObjectURL和downloadcanvas的toDataUrl，结合download为什么上面写了这么多方法。因为移动端不好用。不行的原因是移动端（微信、QQ、QQ浏览器）无法下载DataURL和BlobURL。如何用img显示SVG这是我当时在张新旭大师那里看到的方法。SVGTODataURLdata:image/svg+xml,%3Csvgxmlns='http://w这样我们就可以显示了。download直接下载上面我们已经展示了，直接下载即可。nonono，因为上面的Dataurl是svg格式的，下载的也是SVG格式的。所以我们需要用img读取svgurl。然后画布读取img。然后canvas输出想要的图片格式。然后重新下载。下载不可用，我们该怎么办？PC端，去下载。在移动端，长按保存图片。摘要步骤SVG生成雷达图。（实现效果）SVG转DataUrl。（为了加载img）img加载DataUrl。（为了加载画布）画布加载img。（为了改变输出格式）canvastoDataUrl。（将输出格式改为图片格式）视情况支持在手机端下载图片。PC端长按下载。下载测试地址更新：计算点：2019-06-1009:42:14时间：2019-06-1009:0042:14问题：如果计算对应点，假设我们要做一个五边形，宽度为高度为200px。每个能力是0-100%。圆心为100,100，我们先把它分成五份360/5=72通过上面我们可以把我们的问题变成一个已知的圆心，线段点&长度（百分比*0度的最长边），和旋转角度（每个Item能力为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
