<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. IE兼容模式

    何为兼容模式 这个和IE的发展历程相关,在IE8之前Browser基本上属于IE一家独大,然后ie就有很多与web standard不一致的地方,比如只有自己才看得懂的tag等.后来由于chrome, ...

  2. 执行sql语句异常...需要的参数与提供的值个数不匹配

    执行mysql语句时,出现以下错误时. 看错误提示,提示说你的sql语句只需要5个参数,而你提供了8个值value,你确定你确实需要8个参数,而你的sql语句却提示说只需要5个参数 这时,请仔细检查一 ...

  3. bzoj 2301 [HAOI2011]Problem b（莫比乌斯反演+分块优化）

    题意:对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 1≤n≤50000,1≤a≤b≤50000, ...

  4. 【摘抄】u3d|unity学习教程与方法

    小编,因为下面这句话,还是决定,只摘链接地址(来自百度经验): http://jingyan.baidu.com/article/19192ad820f17be53e570715.html 经验内容仅 ...

  5. UUIDUtils

    package com.cc.hkjc.util; import java.util.UUID; /** * 字符串工具类 *  * @author:匿名 *  */public class UUID ...

  6. 花式GCD

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  7. 理解iOS Event Handling

    写在前面 最近的一个iOS App项目中遇到了这么问题:通过App访问服务器的大多数资源不需要登录,但是访问某些资源是需要用户提供验证的,一般来说,通常App的做法(譬如美团App)将这些资源放在“我 ...

  8. 【POJ 1151】 Altlantis

    [题目链接] 点击打开链接 [算法] 线段树扫描线 推荐一篇比较容易理解的线段树扫描线的文章 : https://blog.csdn.net/u013480600/article/details/22 ...

  9. MyBatis缓存设计

    和大多数ORM框架一样,为了尽可能减少数据库的访问,MyBatis设计支持缓存功能.设计上通过Cache接口提供SPI(服务提供接口),可以让第三方缓存提供具体的缓存实现,比如使用ehcache.Re ...

  10. 洛谷P1290 欧几里德的游戏

    题目:https://www.luogu.org/problemnew/show/P1290 只要出现n>=2*m,就可以每次把较大的数控制在较小的数的一倍与二倍之间,则控制了对方的走法: 每次 ...