<!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. Pinyin4j导读

    Pinyin4j是Java中的拼音库,作者李民. 拼音这件事其实非常简单,无非是一种映射.但是拼音中包含的学问很多,很多前贤都研究过汉语拼音,提出了多种拼音方案.随着历史变迁,拼音的形式也在不断发生变 ...

  2. iOS绘图UIBezierPath 和 Core Graphics框架

    前言 iOS系统本身提供了两套绘图的框架,即UIBezierPath 和 Core Graphics.而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来 ...

  3. 微信小程序-从零开始制作一个跑步微信小程序

    来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...

  4. 进阶之路（基础篇） - 021 arduino基础知识

    什么是arduino(翻译自arduino官方介绍)Arduino 是一款便捷灵活.方便上手的开源电子原型平台,包含硬件(各种型号的arduino板)和软件(arduino IDE).她适用于艺术家. ...

  5. 树莓派 SD卡镜像备份

    一.准备工作 1.已经配置启动的树莓派SD卡 2.Linux系统的pc 3.读卡器 二.修改SD卡文件 刚开始我先再win7下把SD卡接到pc上,发现无法读取.用DISKGENIUS查看pc的磁盘状态 ...

  6. magento 得到树形结构的分类列表

    <?php ?> <?php   class Lehui_AllCategoryList_Block_List extends Mage_Core_Block_Template { ...

  7. Android MD5校验码的生成与算法实现

    在Java中,java.security.MessageDigest (rt.jar中)已经定义了 MD5 的计算,所以我们只需要简单地调用即可得到 MD5 的128 位整数.然后将此 128 位计 ...

  8. 模拟器集成3DTouch-b

    本文主要讲解3DTouch各种场景下的集成,开发主屏幕应用icon上的快捷选项标签(Home Screen Quick Actions),静态设置 UIApplicationShortcutItem ...

  9. FFmpeg 滤镜及其效果

    原文地址:https://blog.csdn.net/dangxw_/article/details/49001413 代码中使用滤镜参见上一篇博客:http://blog.csdn.net/dang ...

  10. 【Linux】分割命令split

    如果你有文件太大,导致一些携带式装置无法复制的问题,嘿嘿!找 split 就对了! 他可以帮你将一个大文件,依据文件大小或行数来分割,就可以将大文件分割成为小文件了! 快速又有效啊!真心不错- [ro ...