<!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. [转载]linux下如何查看系统和内核版本

    原文地址:linux下如何查看系统和内核版本作者:vleage 1. 查看内核版本命令: 1) [root@q1test01 ~]# cat /proc/version Linux version 2 ...

  2. MATLAB 的unique函数——数组矩阵的唯一值

    MATLAB 的unique函数——求数组矩阵的唯一值 相关MathWork文档见此:unique数组中的唯一值 1.C = unique(A) 返回与 A 中相同的数据,但是不包含重复项.C 已按照 ...

  3. 【备份】使用mysqldump 实现rename database name（mysql数据库改名称）

    需求:将jxl_credit改名为jxl_test;输入:jxl_credit输出: jxl_test; 实现方式:1).新建jxl_test,2).备份jxl_credit到本地,3).然后将备份数 ...

  4. iOS 关于 GIF 图片那点事

    前言 前几天我们项目组的群里提了这么一件事情:在我们的应用中存储动态的GIF图到相册,保存的图片变成了静态图片.而微博则能正确保存,可见这并不是一个技术不可实现的.前不久刚好看了苹果关于ImageIO ...

  5. Redis学习之路（004）- 报错及问题

    在i配置编译的过程中,遇到一下问题: 1. /redis_test: error while loading shared libraries: libhiredis.so.0.13: cannot ...

  6. 树莓派SD卡制作，并成功启动

    需要条件: 硬件部分: 1.SD卡一张(树莓派支持的) 2.树莓派3 B + 一个(其他的版本也是可以的,这里默3B+). 1.下载树莓派镜像(NOOBS_v1_9_2.zip) wget http: ...

  7. Oracle->mysql碰到的问题

    1.大小写敏感的区别(如果服务器OS是linux).    在oracle中一般情况下不区分大小写.有时候我们在使用oracle不注意大小写的问题,表名和字段名不加双引号是不区分大小写的,像这样:in ...

  8. vc2010 属性值无效 灾难性故障 解决方法

    原文链接: http://blog.csdn.net/enterlly/article/details/8739281 说明: 我遇到这个问题是这样的,在为某个类添加消息时出现的.因为该类不在此工程的 ...

  9. 供CImage类显示的半透明PNG文件处理方法

    原文链接: http://blog.sina.com.cn/s/blog_4070692f010003gy.html   前补:没想到这个帖子好像挺多人看哪……看来大家都被这个png郁闷的够呛.显示p ...

  10. 【转】java原理—反射机制

    一.什么是反射:反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力.这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语言 ...