运行效果：

<!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. Servlet+JSP 原理

    Servlet是用Java编写的Server端程序,与协议和平台无关,可移植行较强. Servlet在编辑时须要导入特定的Servlet API 的包,类似于普通Java程序的写法. Servlet採 ...

  2. [办公自动化]如何让excel图表标签中显示最新值数据

    同事做了一张excel图表,希望最新的数据显示数据标签,其他都不显示.并且当单元格的数据新增加时,这个标签要能自动更新. 这里需要用到公式,获取到这个最新值.在b2输入公式=lookup(9e+307 ...

  3. 使用 FFmpeg 处理高质量 GIF 图片

    使用 FFmpeg 处理高质量 GIF 图片 - 为程序员服务  http://ju.outofmemory.cn/entry/169845

  4. hdoj--1379--DNA Sorting（排序水题）

     DNA Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  5. JS判断字符串中是否存在某个字符

    用String类中的indexOf函数,例如:String str="we find out sth";if(str.indexOf("o")==-1){ // ...

  6. SVN报错 Not Found In Revision 不支持空目录

    如果你要初始化上传的SVN目录为空,有可能会报这个错误 解决方法:在SVN下新建一个目录即可

  7. Tomcat启动Web.xml引用其它XML配置报FileNotFound异常解决方案

    如果使用JEECG框架进行Tomcat启动时,如果web.xml引用了其他xml文件,需要在tomcat文件夹里的config文件夹里的context.xml文件里的Context标签里配置xmlBl ...

  8. E20170612-sl

     tampon n.     卫生棉塞; 止血棉塞;    sanitary  n. 公共厕所;  adj.     卫生的; 清洁的;    belonging n.     附属品,附件,属性; ...

  9. bzoj 1741: [Usaco2005 nov]Asteroids 穿越小行星群【最大点覆盖】

    二分图最大点覆盖模型,因为对于一个点(x,y)显然只要选x或者y就好了,于是连边,跑最大匹配=最大点覆盖(不会证) #include<iostream> #include<cstdi ...

  10. DotnetCore(1)尝鲜构建Web应用

    在上篇文章中DotnetCore环境安装完成后,现在我们来尝试构建Web应用. 新建文件夹NetCoreWebDemo,并cd进入NetCoreWebDemo文件夹 同时Ctrl+shift按下快捷键 ...