前天,快下班的時候,一朋友發來一個戰績圖。
這是要約我上分?(這兄弟一手 C 位吊打親友)。我果斷拒絕三連。
結果,小韭菜問我,右邊那個圖怎麼作?那好了,事情從這裏開始css
這個圖好像叫雷達圖,那咱們先去看 echarts,簡直不要太像好嗎?html
小韭菜沒給我反應的機會提出了另外一個想法:簡單一點
簡單一點,我又想起了 Vue官網 有這個東西。前端
小韭菜看都沒看就說:不用 Vue
What?我只是讓你看看原理啊。那好吧,我看了一眼,就是 svg
實現vue
jsrun測試地址,若是 jsrun 掛了,能夠去我我的網站上看測試地址。canvas
<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>
<polygon>
標籤用來建立含有很多於三個邊的圖形。points
屬性定義多邊形每一個角的 x 和 y 座標segmentfault
那咱們來看上面的圖片,正好五個角,那咱們就能夠動手改改。簡單的一匹瀏覽器
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瀏覽器)沒法下載。echarts
這個仍是當時在張鑫旭張大師哪裏看到的方法。
SVGTODataURL data:image/svg+xml,%3Csvg xmlns='http://w
這樣咱們就能夠顯示了。ide
上面咱們顯示了出來,直接下載吧。nonono,由於上面的 Dataurl 是 svg 格式的,下載也是 SVG 格式的。
因此咱們須要用 img 讀取 svgurl。而後 canvas 讀取 img 。而後 canvas 輸出想要的圖片格式。而後再下載。
分狀況支持下載
時間:2019年6月10日09:42:14
問題:若是計算對應的點
假設咱們要作的是 五角形,寬高都是 200px
。各項能力都是 0-100%
。
100,100
360/5 = 72
或者說計算圓上任意一點
圓點座標:(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)
有點汗顏,全都還給老師了。忘的真是乾乾淨淨