Canvas畫(huà)扇形統(tǒng)計(jì)圖

window.onload=function() {

var data=[0.2,0.4,0.1,0.2,0.1];//五個(gè)扇形的占比

var dataColor=["#F8ACAC",'#9185F8','#FD7ADF','#65E0F9','#6EF668'];//五個(gè)扇形的顏色

var angleStart=0,angleEnd,angle;

var Q3Canvas=document.getElementById('Q3-canvas');

var ctx=Q3Canvas.getContext("2d");

for(var i=0;i<data.length;i++){

angle=2*Math.PI*data[i];

angleEnd=angleStart+angle;

ctx.beginPath();

ctx.fillStyle=dataColor[i];

ctx.arc(Q3Canvas.width/2,Q3Canvas.height/2,Q3Canvas.width/2,angleStart,angleEnd);

ctx.lineTo(Q3Canvas.width/2,Q3Canvas.height/2);

ctx.closePath();

ctx.fill();

angleStart=angleEnd;//設(shè)置畫(huà)下一個(gè)扇形的起點(diǎn)位置

};

};

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一:canvas簡(jiǎn)介 1.1什么是canvas? ①:canvas是HTML5提供的一種新標(biāo)簽 ②:HTML5 ...
    GreenHand1閱讀 4,878評(píng)論 2 32
  • html: js: var dom = $("#clock"); var ctx = dom[0].getCont...
    后簡(jiǎn)1994閱讀 311評(píng)論 0 1
  • 一、canvas簡(jiǎn)介 1.1 什么是canvas?(了解) 是HTML5提供的一種新標(biāo)簽 Canvas是一個(gè)矩形區(qū)...
    Looog閱讀 4,034評(píng)論 3 40
  • 一、圖形的組合方式 globalAlpha是一個(gè)介于0和1之間的值(包括0和1),用于指定所有繪制的透明度。默認(rèn)值...
    空谷悠閱讀 1,476評(píng)論 0 0
  • 01 今天下午帶著兩個(gè)熊孩子在外面玩,正和幾個(gè)熟人聊天聊得起勁,手機(jī)微信叮咚一聲響,我打開(kāi)一看,原來(lái)是公眾號(hào)助手發(fā)...
    陳康慧閱讀 463評(píng)論 13 14

友情鏈接更多精彩內(nèi)容