canvas自定義資料圓環

原文： 本人掘金文章

當外掛程式有時滿足不了我們相對應的需求(資料圓環)、ui又要求必須這樣時， 這時就要考慮自定義了；

let canvas = document.getelementbyid('canvas');

let ctx = canvas.getcontext('2d');
// 填充畫布
ctx.fillstyle= 'transparent';
ctx.fillrect(0,0, 150, 150);
ctx.beginpath();
// 初始化畫布起點
ctx.translate(250/2, 170/2);
// 起點
ctx.moveto(0,0);
// 畫大圓
ctx.arc(0,0, 60,0,math.pi*2,false);
ctx.closepath();
ctx.fillstyle='transparent';
ctx.fill();
// 動態環比
let arr = ['0.85', '0.15']
let begindeg = math.pi * 1.5
let enddeg = math.pi * 1.5
arr.foreach((t, index) => 
})//變成圈圖，中間加點東西
ctx.beginpath();
ctx.arc(0, 0, 50, 0,math.pi * 2, true);
ctx.closepath();
ctx.fillstyle = "#000";
ctx.fill();
//繪製文字
ctx.moveto(0,0);//移動筆觸到原點
ctx.fillstyle = 'white';//文字顏色
ctx.font="20px normal ";
ctx.textalign="center";//相對原點水平居中
ctx.textbaseline="middle";//相對原點垂直居中
ctx.filltext("88.8%",0,-8);
ctx.moveto(0,0);//移動筆觸到原點
ctx.fillstyle = 'white';//文字顏色
ctx.font='15px normal ';//文字
ctx.textalign="center";//相對原點水平居中
ctx.textbaseline="middle";//相對原點垂直居中
ctx.filltext('脫機率',0,15);//開始寫字

自定義圓環

今天公司用到乙個這東西就寫了乙個，created by t410 2 on 2018 1 18.我們選取的位置都是已0，0點開始，然後來畫圖，最後畫的圖的位置是由我們布局，或者自身在把他移動到任何位置上 public class broudprogress extends view public b...

android 自定義圓環

最近學了自定義控制項，以前一直想寫個圓環，最近粗粗寫了個，以便記錄.public class ringprogressview extends view public ringprogressview context context,attributeset attrs private void i...

自定義View 圓環和圓環進度條

可能小夥伴們感覺自定義view很高深，其實大家用多了別人的輪子，研究別人的輪子，自己也要學著造輪子，那就用最簡單的練練手，教小夥伴們自定義view的一些步驟，這可能是小夥伴們最需要的。自定義圓環 import android.content.context import android.conten...