資訊專欄INFORMATION COLUMN
摘要：前天，快下班的時候，一朋友發(fā)來一個戰(zhàn)績圖。然后又提出了一個需求，下載這個圖片。我前兩天才寫了文章的前端培訓初級階段場景實戰(zhàn)下載文件下載進度小韭菜之前用過還是啥來著。不好使的原因就是和在移動端微信瀏覽器無法下載。移動端，走長按保存圖片。
前天，快下班的時候，一朋友發(fā)來一個戰(zhàn)績圖。
這是要約我上分？（這兄弟一手 C 位吊打親友）。我果斷拒絕三連。
結(jié)果，小韭菜問我，右邊那個圖怎么做？那好了，事情從這里開始
這個圖好像叫雷達圖，那我們先去看 echarts，簡直不要太像好嗎？
小韭菜沒給我反應的機會提出了另一個想法：簡單一點
簡單一點，我又想起了 Vue官網(wǎng) 有這個東西。
小韭菜看都沒看就說：不用 Vue
What？我只是讓你看看原理啊。那好吧，我看了一眼，就是 svg 實現(xiàn)
jsrun測試地址，如果 jsrun 掛了，可以去我個人網(wǎng)站上看測試地址。
SVG 的 polygon
points 屬性定義多邊形每個角的 x 和 y 坐標
那我們來看上面的圖片，正好五個角，那我們就可以動手改改。簡單的一匹
100,10.899999999999991 175.32367609057616,75.52585404550416 145.49457852743743,162.61791536462093 71.43363673858582,139.31822592662246 41.795341202736594,81.08815994425322實現(xiàn)下載雷達圖
因為快下班了，小韭菜看了一眼說搞定。然后又提出了一個需求，下載這個圖片。我一想簡單的一匹啊。我前兩天才寫了文章的 前端培訓-初級階段-場景實戰(zhàn)（2019-06-06）-下載文件&下載進度
小韭菜之前用過 html2canvas 還是啥來著。直接這樣搞
download 直接下載（svgToDataurl）
svgToCanvas 然后下載 canvas 的圖片
canvas 的 toBlob 結(jié)合 URL.createObjectURL 和 download
canvas 的 toDataUrl 結(jié)合 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 。
移動端，走 長按保存圖片。
總結(jié)步驟SVG 生成雷達圖。（實現(xiàn)效果）
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
通過上面的我們可以把我們問題變?yōu)?strong>已知圓心、線段點&長度（百分比*0度的最長邊）、和旋轉(zhuǎn)角度（每項能力是72），求旋轉(zhuǎn)點坐標。如下，已知 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文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104473.html
摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明（菜鳥請進，大神繞道 ~） 前端...
摘要：本項目是一個簡單的全棧項目，前端新手可以拿來練練手。項目實現(xiàn)了一些簡單的功能，后臺可以對圖書進行錄入錄出掃碼或手動，前臺顯示錄入的圖書，并且前臺注冊登錄后可以將書的訂單發(fā)給服務器，并存到服務器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【覺得不錯就來個 star 吧 ^_^】 說明（菜鳥請進，大神繞道 ~） 前端...
摘要：用于將及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標識則是將記錄的數(shù)據(jù)結(jié)構(gòu)重建為對應的。用于記錄中的所有變更則是將記錄的變更按照對應的時間一一重放。表示觀察變動時，是否需要記錄變動前的屬性值。該方法返回變動記錄的數(shù)組。 摘要： 網(wǎng)頁應該如何錄屏呢？ 作者：Winty 原文：用戶行為錄幀調(diào)研 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 關鍵點 首先，每一次會話都有一個唯一的s...
閱讀 1243·2021-09-26 09:46
閱讀 1592·2021-09-06 15:00
閱讀 725·2019-08-30 15:52
閱讀 1126·2019-08-29 13:10
閱讀 1287·2019-08-26 13:47
閱讀 1485·2019-08-26 13:35
閱讀 2034·2019-08-23 18:38
閱讀 733·2019-08-23 17:59
