<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源码分析

    ReactMount.render -> ReactMount._renderSubtreeIntoContainer -> ReactMount._renderNewRootCompon ...

  2. js中的width问题

    1.在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding ...

  3. boost之timer

    1. timer类实现 #pragma once #include <ctime> #include <limits> class timer { public: timer( ...

  4. holiday题解

    题目描述如下: 经过几个月辛勤的工作,FJ 决定让奶牛放假.假期可以在 1…N 天内任意选择一段(需要连续),每一天都有一个享受指数 W.但是奶牛的要求非常苛刻,假期不能短于 P 天,否则奶牛不能得到 ...

  5. 高可用性和PyMongo

        High Availability and PyMongo高可用性和PyMongo************************************ PyMongo makes it e ...

  6. Java Container ***

    Java Container ArrayList 和Vector是采用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,都允许直接序号索引元素,但是插入数据要设计到数组元素移动等内存 ...

  7. windows server安装zabbix-agent

    1.准备安装包: 下载链接:https://www.zabbix.com/downloads/3.4.0/zabbix_agents_3.4.0.win.zip 2.在C盘下创建一个zabbix目录, ...

  8. sql server2008配置管理工具服务显示远程过程调用失败

    SQL SERVER2008配置管理工具服务显示远程过程调用失败   前两天,装了VS2012后,打开SQL2008配置管理工具,发现SQL服务名称里什么也没有,只有一个提示:(如图) 上网搜了,试了 ...

  9. （水题）洛谷 - P1478 - 陶陶摘苹果（升级版）

    https://www.luogu.org/problemnew/show/P1478 没啥好说的…… 居然还漏写一个等于号WA了一发. #include<bits/stdc++.h> u ...

  10. hdu5443 【线段树】

    题意: 略 思路: 暴力是可以的O(1e7),这里采用线段树,线段树区间查找O(logn) #include<stdio.h> #include<string.h> #incl ...