运行效果：

<!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. ios打包静态库

    1. 什么是库? 所谓库就是程序代码的集合,是共享程序代码的一种方式. 2. 库的分类 根据程序代码的开源情况,库可以分为两类 开源库源代码是公开的,你可以看到具体实现.比如GitHub上比较出名的第 ...

  2. python uzip

    import zipfile import osdef un_zip(file_name): """unzip zip file""" zi ...

  3. cocos2d-x 求相交矩阵

    cocos2d-x有推断矩阵相交的方法 CCRect::intersectsRect(CCRect& rect)但可惜没有提供求两个相交矩阵的方法,我作了总结,代码例如以下: CCRect T ...

  4. [RK3288][Android6.0] 音频调试方法小结【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/70053135 Platform: ROCKCHIPOS: Android 6.0Kernel ...

  5. Notification操作大全

    目录 一:普通的Notification Notification 的基本操作 给 Notification 设置 Action 更新 Notification 取消 Notification 设置 ...

  6. 【POJ 1364】 King

    [题目链接] 点击打开链接 [算法] 差分约束系统 [代码] #include <algorithm> #include <bitset> #include <cctyp ...

  7. 10.05FZSZ Day2模拟总结

    今天的题目难度比昨天小一些,但是太菜的我还是啥也不会. 今天的出题大佬是Heaplex,他的题目中倒是出现了ZZQ,不知道是否是本人? T1.a 期望得分30,实际得分30 这道题开场发现好像有什么小 ...

  8. windows 下操作目录（使用DOS命令）

    Attrib 更改单个文件或目录的属性.该命令设置或删除指派给文件或目录的只读.系统.存档.隐藏以及压缩属性. 含有下列参数的 attrib 命令仅当使用故障恢复控制台时才可用.含有不同参数的 att ...

  9. FastText 分析与实践

    一. 前言 自然语言处理(NLP)是机器学习,人工智能中的一个重要领域.文本表达是 NLP中的基础技术,文本分类则是 NLP 的重要应用.在 2016 年, Facebook Research 开源了 ...

  10. JsonFormat和DateTimeFormate格式化参数

    JsonFormat :出参 DateTimeFormate : 入参 http://www.iteye.com/problems/53816 @DateTimeFormat(pattern = &q ...