运行效果：

<!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. AutoCAD如何添加网络打印机 添加公司打印机

    1 请确认你已经连接了这台网络打印机,你没法打AutoCAD图纸,但是应该能打Word文档.能打Word文档说明你驱动装好了,通信也没问题,只是AutoCAD的配置不对导致的.   2 点击打印,打印 ...

  2. 静态链表的C++实现

    静态链表是使用数组实现的能够高速插入和删除数据的链表,静态链表和链式单链表比的缺点在于链表的长度仅仅能初始化设置好,而相相应普通的顺序存储的链表,静态链表不能实现高速的读写随意的元素. 当然静态链表给 ...

  3. openstack（2） -------RabbitMQ集群部署

    一.RabbitMQ简介 RabbitMQ属于一个流行的开源消息队列系统.属于AMQP( 高级消息队列协议 ) 标准的一个 实现.是应用层协议的一个开放标准,为面向消息的中间件设计.用于在分布式系统中 ...

  4. 连接App.config

    ConfigurationManager.AppSettings["AdminName"]; 连接App.config的字符

  5. ORACLE取周、月、季、年的開始时间和结束时间

     1           取周的開始时间和结束时间 取周的開始时间.以星期一为開始. SQL>SELECT TRUNC(TO_DATE('2013-11-25 10:31:11','YYYY ...

  6. Echarts 如何使用 bmap 的 API

    使用 Echarts 在绘制 Binning on map 的图形时(其实也就是 在地图上绘制热力色块图) 解决因为数据量过大,希望在拖拽加载或者缩放加载的时候,根据可视区域的经纬度范围,来请求相应的 ...

  7. linux 和win7 双系统模式下 忘记win7 密码的修改方法

    首先登陆linux系统,在linux 系统下找到win7系统的安装盘(比如为C盘), (1)进入到C://windows/system32下 找到osk.exe 文件,并将其剪切到其他的地方(记住这个 ...

  8. 并不对劲的[noi2006]网络收费

    题目略长,就从大视野上复制了. 听上去好像费用流,然而…… ***************************表示略长的题目的分界线************************ 1495: [ ...

  9. 洛谷P1291 [SHOI2002]百事世界杯之旅——期望DP

    题目:https://www.luogu.org/problemnew/show/P1291 水水的经典期望DP: 输出有毒.(其实也很简单啦) 代码如下: #include<iostream& ...

  10. KVPhone，VOS官方的SIP软电话电脑客户端

    来自官方,品质纯正.但是可能因为JAVA环境等问题无法安装,可以试试! 下载地址: 解压密码:www.51voip.org