<style>
body {
    background: black;
    text-align: center;
}
#cans {
    background: white;
}
</style>

<script>
function disToRad(n){//将度数表示弧度计算的方法
return n*Math.PI/180;//π用PI表示，π=180°，所以1°=PI/180
}

window.onload=function(){
    let cans=document.getElementById("cans");//获取画布
    let ctx=cans.getContext("2d");//创建画板
    let cx=300;//设置x轴初始位置坐标(即圆的中心坐标)
    let cy=200;//设置y轴初始位置坐标(即圆的中心坐标)
    let r=150;//半径

function pie(startAng,endAng,color){//创建一个画扇形的方法
         let nx,ny;//x轴初始位置坐标
         ctx.beginPath();//防止之前画好的部分受后面画的影响
         ctx.moveTo(cx,cy);//画笔开始坐标(即圆的中心坐标)
         nx=cx+Math.sin(disToRad(startAng))*r;//弧线初始点的x轴坐标
         ny=cy-Math.cos(disToRad(startAng))*r;
         ctx.lineTo(nx,ny);//设置终点坐标（弧线初始点坐标）
         ctx.arc(cx,cy,r,disToRad(startAng-90),disToRad(endAng-90),false);//画扇形，弧度=度数-90
         ctx.closePath();//图形闭合
         ctx.stroke();//描边
         ctx.fillStyle=color;//设置填充颜色
          ctx.fill();//填充
    }

var data=[10,30,35,20,5];//表示度数的数组
    let color=['red','green','yellow','blue','orange'];//表示颜色的数组
    let sum=data.reduce(function(prev,current){
        return prev+current;//求总和
     })
    let avgDegree=data.map(function(item){
        return item/sum*360;//转换为角度
    })
   lastDegree=0;//设置初始度数
  avgDegree.forEach(function(item,index){
      pie(lastDegree,lastDegree+item,color[index]);//调用pie(),的分别循环换获取startAng,endAng,color
      lastDegree+=item;
   })

}

</script>

<body>
<canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>
</body>

效果如图：

canvas画饼图的更多相关文章

  1. 小程序使用Canvas画饼图

    先上效果图 -------------------------------------------------------------wxml代码开始------------------------- ...

  2. canvas画扇形、饼图

    画扇形的方法 方法一:起始角度是0,那么第一条线就是line(r,0),通过旋转扇形的角度,第二条线就是line(r,0) //圆弧 ctx.save(); ctx.translate(100, 10 ...

  3. （转）浅谈HTML5与css3画饼图！

    神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...

  4. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  5. canvas 画圈 demo

    html代码: <canvas id="clickCanvas2"  width="180" height="180" data-to ...

  6. 踩个猴尾不容易啊 Canvas画个猴子

    踩个猴尾不容易啊  Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. canvas画随机闪烁的星星

    canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...

  8. canvas画时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  9. Canvas画椭圆的方法

    虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

随机推荐

  1. react native 知识点总结（一）

    一.关于react native 版本的升级 参照文档:http://reactnative.cn/docs/0.45/upgrading.html react-native -v   查看当前版本 ...

  2. HDU 1022 之 Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. YTU 2866: 结构体---点坐标结构体

    2866: 结构体---点坐标结构体 时间限制: 1 Sec  内存限制: 128 MB 提交: 499  解决: 344 题目描述 定义一个表示点坐标的结构体,输入两个点的坐标,输出这两个点中点的坐 ...

  4. Android多国语言文件夹汇总

    Arabic, Egypt (ar-rEG) —————————–阿拉伯语,埃及 Arabic, Israel (ar-rIL) ——————————-阿拉伯语,以色列 Bulgarian, Bulg ...

  5. 固定dll的加载基址的方法

    调试dll的时候会有一件事情比较烦人,就是dll加载的地址不会很固定(默认设置下编译的dll基址总是0x10000000,多个同基址的dll加载时,后面的肯定会被重定位),这给前后多次调试时对比分析结 ...

  6. Gulp安装及配合组件构建前端开发一体化(转)

    Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具 ...

  7. FTP服务相关实现

    FTP服务的相关实现 vsftpd介绍 1>vsftpd全名为very secure FTP daemon,为非常安全的FTP服务,是针对操作系统的权限来设计的,这个权限是发起者发起该服务进程的 ...

  8. ARM汇编中ldr伪指令和ldr指令（转载）

    转自:http://blog.csdn.net/ce123_zhouwei/article/details/7182756 ARM是RISC结构,数据从内存到CPU之间的移动只能通过L/S指令来完成, ...

  9. Android6.0 危险权限和普通权限

    Normal Permissions如下 ACCESS_LOCATION_EXTRA_COMMANDS ACCESS_NETWORK_STATE ACCESS_NOTIFICATION_POLICY ...

  10. bzoj 1003: [ZJOI2006]物流运输【spfa+dp】

    预处理出ans[i][j]为i到j时间的最短路,设f[i]为到i时间的最小代价,转移显然就是 f[i]=min(f[j-1]+ans[j][i]*(i-j+1)+k); #include<ios ...