小程式canvas適配android7,8

不知道你們有沒有遇到過，公司要求在小程式中畫儀表盤，刻度尺，還有環形進度，如下

加上echarts就是4個動畫！！！！沒見過在小程式中這麼多動畫。 其中刻度尺這個元件在測試過程中發現如果是android7,8版本的手機就畫不出來，刻度數和刻度點都沒有，但還是能滑動並且顯示出數字。

專案是mpvue做的，修改bug過程中百度了方法， 有createCanvasContext的時候加一個this。 建立的ctx不能跟this掛鉤，不能this.ctx這樣。 在drawRuler()的時候加一個setTimeOut，延遲兩秒 v-if來判斷是否建立了這個canvas等等，都沒有用。

後來以為是mpvue的坑，用了別人的原生刻度尺元件,發現也是有的，但是有時候會出現刻度畫不完全，或者刻度重疊的問題，他的實現方式是先canvas畫出來，然後匯出成一個圖片，再通過寬高來調整圖片使他剛好適應你提供的容器寬高，這種方法固然好，但如果canvas畫的太長，會出現繪製不完全或者繪製重疊那種情況，而且延遲繪製使用者體驗也很差。

再後來也是用了別人的css繪製的刻度尺元件，效果也很好，但我需要的是一個刻度值代表0.1的值，他實現的是一個刻度值代表1個值，他畫的是刻度線，我畫的是圓，所以也不太符合我的需求。

沒得辦法只能自己用css實現了，具體程式碼在git中，有用的話點個小星星呀 github.com/circlewang/…