1. <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    <div id="container">
        <canvas id="cavsElem">
            你的浏览器不支持canvas，请升级浏览器
        </canvas>
    </div>
    <script>
        (function(){
            var canvas=document.querySelector('#cavsElem');
            var ctx=canvas.getContext('2d');
            canvas.width=600;
            canvas.height=600;
            canvas.strokeStyle='1px solid #000';
            var data = [{
                "value": .2,
                "color": "red",
                "title": "应届生"
            },{
                "value": .3,
                "color": "blue",
                "title": "社会招生"
            },{
                "value": .4,
                "color": "green",
                "title": "老学员推荐"
            },{
                "value": .1,
                "color": "#ccc",
                "title": "公开课"
            }];
            var tempAngle = -90;
            //设置角度的中间变量
            var x0 = 400, y0 = 400;
            var radius = 200;
            // 从-90度开始绘制
            for( var i = 0; i < data.length; i++ ) {
                ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态
                ctx.moveTo(x0,y0);
                //当前扇形的角度
                var angle = data[i].value * 360;
                ctx.fillStyle = data[i].color;
                //开始从 tempAngle绘制
                var startAngle  = tempAngle * Math.PI / 180;
                //从tempAngle绘制到 我们自己的angle区域
                var endAngle = (tempAngle + angle) * Math.PI / 180;
                //参数： x0，y0 圆心坐标，  radius：半径
                // startAngle：开始绘制的弧度
                // endAngle：结束绘制的弧度！！
                ctx.arc(x0, y0, radius, startAngle, endAngle);
                ctx.fill();
                tempAngle += angle;//下一次绘制的起始角度
            }
        }())
    </script>
    </body>
    </html>

使用canvas绘制扇形图的更多相关文章

  1. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  3. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  4. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  5. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  6. canvas 绘制八卦图

    绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...

  7. canvas绘制折线图(仿echarts)

    遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...

  8. canvas 绘制星座图（好玩）--转载

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  9. canvas绘制折线图

    效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...

随机推荐

  1. [转载]RHEL-6启动时提示：“/usr/libexec/gconf-sanit

    原文地址:RHEL-6启动时提示:"/usr/libexec/gconf-sanity-check-2 exited with status 256"作者:huage 系统环境:R ...

  2. Golang 用go-sql-driver 调用MySQL存储过程时的问题排查

    今天在用go-sql-driver做MySQL driver调用MySQL的存储过程时遇到一个罕见的报错.本文对这个错误及其解做一个简单的总结. 1 问题描述 按照go中sql包提供的接口,应用层代码 ...

  3. [SQL] 请教一下 count里面有case when 一般情况下啥时候用

    http://www.itpub.net/forum.php?mod=viewthread&tid=1810967 问题: 比如 count(case when  pday_id=${deal ...

  4. iOS block分析

    block是代码块,其本质和变量类似.不同的是代码块存储的数据是一个函数体.使用Block,就可以像其他标准函数一样,传入参数,并得到返回值. 可以把Block当做Objective-C的匿名函数,B ...

  5. Java 时间相比较

    private String getRunTime() { String start = new Date.getTime(); String end= new Date.getTime(); lon ...

  6. numpy 基于数值范围创建ndarray（）

    基于数值范围创建函数创建ndarray 1 numpy.arange arange([start=0,] stop[, step=1,][, dtype=None]) >>> np. ...

  7. 【BZOJ2395】【Balkan 2011】Timeismoney 最小乘积生成树

    链接: #include <stdio.h> int main() { puts("转载请注明出处[辗转山河弋流歌 by 空灰冰魂]谢谢"); puts("网 ...

  8. Andriod下载源码导入后AndroidManifest.xml小红叉的解决办法

    问题描述: 下载源码后,用eclipse导入,AndroidManifest.xml小红叉,而且AndroidManifest.xml打不开无法编译,请高人指点! 解决办法: 网上下载的工程文件夹不要 ...

  9. wireshark的拆包与合并

    背景:分析较高并发情景下的通话质量不佳的原因,需要长期抓包. 一.自动打包 1. 指定以1MB的大小打包,这个必须在/var/tmp/目录下执行. tcpdump -i ens32 -vvvv -C ...

  10. 【转】UML类图符号 6种关系说明以及举例

    转自http://www.cnblogs.com/duanxz/archive/2012/06/13/2547801.html UML中描述对象和类之间相互关系的方式包括:依赖(Dependency) ...