运行效果：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id="drawing" width="" height="">A drawing of someing!</canvas>

    <script type="text/javascript">

        //绘制饼图

        var drawCircle = function(canvasId, data_arr, color_arr, text_arr){

            var drawing = document.getElementById(canvasId);

            if(drawing.getContext) {

                var context = drawing.getContext('2d');

                var radius = drawing.height/ -,//半径

                    ox = radius +, oy = radius +;//圆心

                var width = , height = , //图例宽高

                    posX = ox *  +, posY = ;//图例位置

                var textX = posX + width + , textY = posY + ;//文本位置

                var startAngle = , endAngle = ;//起始、结束弧度

                context.strokeStyle = 'Purple';

                context.lineWidth = ;

                context.strokeRect(, , drawing.width, drawing.height);

                for(var i=, len=data_arr.length; i<len; i++) {

                    //绘制饼图

                    endAngle += data_arr[i] * *Math.PI;

                    context.fillStyle = color_arr[i];

                    context.beginPath();

                    context.moveTo(ox, oy);

                    context.arc(ox, oy, radius, startAngle, endAngle, false);

                    context.closePath();

                    context.fill();

                    startAngle = endAngle;

                    //绘制图例

                    context.fillRect(posX, posY +  * i, width, height);

                    context.moveTo(posX, posY +  * i);

                    context.font = 'bold 12px Arial';

                    var percent = text_arr[i] + ' : ' + data_arr[i]* + '%';

                    context.fillText(percent, textX, textY +  * i);

                }

            }

        };

        var init = function(){

            var data_arr = [0.05, 0.25, 0.6, 0.1],

                color_arr = ['#00FF21', '#FFAA00', '#00AABB', '#FF4400'],

                text_arr =['第一季度', '第二季度', '第三季度', '第四季度'];

            drawCircle('drawing', data_arr, color_arr, text_arr);

        };

        init();

    </script>

</body>

</html>

canvas一周一练 -- canvas绘制饼图（3）的更多相关文章

  1. canvas一周一练 -- canvas绘制中国银行标志（4）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制立体文字（2）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. 带着canvas去流浪系列之三 绘制饼图

    [摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

  8. 【带着canvas去流浪】 （3）绘制饼图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...

  9. HTML5 Canvas（实战：绘制饼图2 Tooltip）

    继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...

随机推荐

  1. 百度知道的代码复制粘贴到VB没有换行怎么办

    在如下所示的网页中,复制 粘贴到word文档,换行还是有的   再复制到VB6.0中还是可用的

  2. 基于cocos2d-x的跑酷游戏，不同高度地面的碰撞检測demo，有兴趣能够看一看

    1. demo大致分为4个模块: 地图,角色,障碍 逻辑检測认为和不同高度地面的碰撞.1次跳和2连跳的实现. 代码链接:http://download.csdn.net/detail/zangleng ...

  3. mac 终端经常使用命令（三）

    基本命令 1.列出文件 ls 參数 文件夹名        例: 看看驱动文件夹下有什么:ls /System/Library/Extensions 參数 -w 显示中文,-l 具体信息. -a 包含 ...

  4. GDI+学习之------ 画线、区域填充、写字

    <精通GDI编程>里的代码.在学习过程中对它加以总结,以防以后用到,全部代码都是在MFC 单文档中实现的,写在View::OnDraw(CDC */*pDC*/)中 画线/边框(Pen) ...

  5. 用递归将嵌套的JSON对象遍历出来，转为二维数组

    如题所示,代码如下: var arJsonNesting = [{id:1,name:"zhang3" ,children:[{id:2,name:"zhang33&qu ...

  6. shell如何查看单个或多个文件的行数或总行数

    shell如何查看单个或多个文件的行数或总行数_百度经验 https://jingyan.baidu.com/article/cbf0e500b8470f2eab28937d.html 单个文件   ...

  7. iOS10 优化APP首次安装网络权限提示方案

    我刚经历了一场末日(停电),特别是在你想写文档的时候... 言归正传,今天的问题是解决iOS10系统下首次按钮APP弹出的网络权限提示所带来了问题以及优化. 起因 查了相关文章知道由于大陆工信部出台的 ...

  8. 【CSU 1756】Prime

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1756 直接暴力O(n^2logn)过不了 两两算gcd 考虑每个数的范围[1,1000]统计一下即 ...

  9. xubuntu 17.04 和 iphone 6互传文件方法——使用libimobiledevice就可以像u盘一样操作文件了

    I need to preface this by saying I'm also new to Linux, but I've got it working I think. The instruc ...

  10. Apache Ignite——集合分布式缓存、计算、存储的分布式框架

    Apache Ignite内存数据组织平台是一个高性能.集成化.混合式的企业级分布式架构解决方案,核心价值在于可以帮助我们实现分布式架构透明化,开发人员根本不知道分布式技术的存在,可以使分布式缓存.计 ...