<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. uCos临界区保护

    定义有三种method,stm32f4采用的是第三种:将当前中断的状态标志保存在一个局部变量cpu_sr中,然后再关闭中断.cpu_sr是一个局部变量,存在于所有需要关中断的函数中.注意到,在使用了该 ...

  2. hihocoder 1015 KMP(找多个位置的 【*模板】)

    #1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...

  3. HDU3667 Transportation —— 最小费用流（费用与流量平方成正比）

    题目链接:https://vjudge.net/problem/HDU-3667 Transportation Time Limit: 2000/1000 MS (Java/Others)    Me ...

  4. uptime命令

    uptime命令能够打印系统总共运行了多长时间和系统的平均负载.uptime命令可以显示的信息显示依次为:现在时间.系统已经运行了多长时间.目前有多少登陆用户.系统在过去的1分钟.5分钟和15分钟内的 ...

  5. YTU 2443: C++习题 复数类--重载运算符3+

    2443: C++习题 复数类--重载运算符3+ 时间限制: 1 Sec  内存限制: 128 MB 提交: 1368  解决: 733 题目描述 请编写程序,处理一个复数与一个double数相加的运 ...

  6. hdu-5676 ztr loves lucky numbers(乱搞题)

    题目链接: ztr loves lucky numbers  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 65536/65536 K ( ...

  7. UIDynamic 基础

      一.简单介绍 1.什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如:重力.弹性碰撞 ...

  8. @font-face 用fontsquirrel把ttf文件获取别的文件格式

    @font-face是css3的一个模块,但是@font-face这个功能早在IE4就支持了,他主要是把自己定义的Web字体嵌入到你的网页中, @font-face { font-family: &l ...

  9. scrollerView 滚动的时候改变 scrollerView 的背景色代码

    要实现点击电池条的时候立即回到页面的顶部的时候注意: 只有当一个主控制器有一个scrollview 并把这个属性设置为yes,其他的scrollview.scrollsToTop = NO 这样才会响 ...

  10. Oracle Function INSTR

    INSTR(string,subString,position,ocurrence)查找字符串位置 解释:      string:字符串      subString:要查找的子字符串      p ...