运行效果：

<!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. JSP自己定义标签入门实例具体解释

    JSP自己定义标签主要能用到的两个包 javax.servlet.jsp.*;javax.servlet.jsp.tagext.*; 自己定义标签<userInfo:showUserInfo/& ...

  2. Cardboard虚拟现实开发初步（二）

    Google Cardboard 虚拟现实眼镜开发初步(二) Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一 ...

  3. 【Unix编程】C/C++获取目录下文件或目录

    在Unix/Linux系统中,要获取一个指定目录下所有的文件或文件夹,一般用dirent.h(POSIX标准定义的目录操作头文件). 一.数据类型 在头文件<dirent.h>中定义了两种 ...

  4. .a 文件解析

    首先先准备一个静态库.a文件,比如叫staticLibrary.a,放在桌面的test目录里. 分离arch 首先先file一下staticLibrary.a,看一下该文件包含几种arch. ~ cd ...

  5. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  6. C#字符串数组排序 C#排序算法大全 C#字符串比较方法 一个.NET通用JSON解析/构建类的实现(c#) C#处理Json文件 asp.net使用Jquery+iframe传值问题

    C#字符串数组排序   //排序只带字符的数组,不带数字的 private   string[]   aa   ={ "a ", "c ", "b & ...

  7. lamdba匿名函数 sored()函数 filter()函数 map函数() 递归函数

    帅爆太阳的男人 1,lamdba匿名函数:为了解决一下简单的需求而设计的一句话函数,语法: 函数名 = lambda 参数: 返回值 def func(n): return n*n print(fun ...

  8. 洛谷 P1759 通天之潜水

    P1759 通天之潜水 19通过 65提交 题目提供者lych 标签动态规划洛谷原创 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目背景 直达通天路·小A历险记第三篇 题目 ...

  9. [Codeforces Round511C] Enlarge GCD

    [题目链接] https://codeforces.com/contest/1047/problem/C [算法] 首先求出n个数的最大公约数g , 将每个数除以g , 那么 , 问题就转化为在n个数 ...

  10. Ural 1517. Freedom of Choice 后缀数组

    Ural1517 所谓后缀数组, 实际上准确的说,应该是排序后缀数组. 一个长度为N的字符串,显然有N个后缀,将他们放入一个数组中并按字典序排序就是后缀数组的任务. 这个数组有很好的性质,使得我们运行 ...