Canvas画扇形统计图

window.onload=function() {

var data=[0.2,0.4,0.1,0.2,0.1];//五个扇形的占比

var dataColor=["#F8ACAC",'#9185F8','#FD7ADF','#65E0F9','#6EF668'];//五个扇形的颜色

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;//设置画下一个扇形的起点位置

};

};

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,718评论 2 32
  • html: js: var dom = $("#clock"); var ctx = dom[0].getCont...
    后简1994阅读 275评论 0 1
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,963评论 3 40
  • 一、图形的组合方式 globalAlpha是一个介于0和1之间的值(包括0和1),用于指定所有绘制的透明度。默认值...
    空谷悠阅读 1,324评论 0 0
  • 01 今天下午带着两个熊孩子在外面玩,正和几个熟人聊天聊得起劲,手机微信叮咚一声响,我打开一看,原来是公众号助手发...
    陈康慧阅读 443评论 13 14