<!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. Out of memory error : GC overhead limit exceeded

    GC overhead limit exceeded 是指垃圾回收器通过分析当前内存使用趋势,提前抛出异常而不是真正等到内存耗尽再抛出异常.如果真正等到内存耗尽再抛出异常,可能的后果是:我们连保存重要 ...

  2. XP、Windows7下自动关机vbs脚本，使用windows计划任务+vbs脚本在XP、Windows7下实现定时自动关机

    VBScript(Microsoft Visual Basic Script Edition).,微软公司可视化BASIC脚本版). 正如其字面所透露的信息, VBS(VBScript的进一步简写)是 ...

  3. 安装Tomcat的Apr

    转:http://www.cnblogs.com/littlehb/archive/2013/04/02/2994785.html 安装Tomcat的Apr,提升性能 发现 Tomcat 可以用 Ap ...

  4. Windows 10安装DockerToolBox失败处理方法

    指令运行报错: Windows 10安装DockerToolBox失败处理方法:升级Windows 10. (注意:只有Windows10 专业版才支持升级,Server和企业版无效)

  5. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线？ Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

  6. Docker 的技术组件

    Docker可以运行于任何安装了现代Linux内核的x64主机上.推荐的内核版本是3.8或者更高.Docker的开销比较低,可用于服务器.台式机或者笔记本.它包括以下几个部分. 一个原生的Linux容 ...

  7. win8 应用商店程序使用SQLITE数据库

    http://www.cnblogs.com/zhuzhenyu/archive/2012/11/27/2790193.html using SQLite; using System; using S ...

  8. Android APK安装完成自动删除安装包

    需要实现此功能,一般实际开发是在自动版本更新上,当更新完开始自动安装完毕后,删除内存卡里的安装包.实现方式很简单,监听应用广播,获取内存卡下的文件,删除! 1.监听广播 package com.exa ...

  9. Linux 性能測试工具

    Linux 性能測试工具 linux performance 查看系统配置 查看CPU信息 lscpu Architecture: x86_64 CPU op-mode(s): 32-bit, 64- ...

  10. STM32定时器T2纯软件仿真时间准确，JTAG在线调试查看时间不准的问题

    通过查看Sec的值和上次中断的差值计算的,虽然这个值是不准的 ,但实际上时间是准的, 原因如下:stm32在调试模式下虽然进断点之后程序停止了,但定时器的时钟还在走,计数器还在计数,若要在产生断点时计 ...