运行效果：

<!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. sharepoint 訪问缩略图

    Sharepoint缩略图 简单介绍 Sharepoint2010中有专门的图片库,当你新建图片库后,向图片上传一部分图片.当你浏览这个库时显示一排排小图片.当点击一个图片时进入显示的是大图.不要简单 ...

  2. 使用Docker部署Gitlab

    由于公司的代码server已使用Gitosis搭建,但由于用户和权限管理太麻烦. 如今想在原有server上再搭建Gitlab,使用Gitlab官方方法直接安装. 会导致与Gitosis冲突,使得Gi ...

  3. Linux bash: scp: command not found的问题记录

    ,总结 scp成功,须要两个server都安装了scp服务才行.

  4. Android 布局自适应屏幕

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenFzNjI3NjExMzA=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  5. Vijos P1023Victoria的舞会3【贪心+DFS求强联通分量】

    链接:Click Me! P1023Victoria的舞会3 Accepted 标签:Victoria的舞会[显示标签] 描写叙述 Victoria是一位颇有成就的艺术家,他因油画作品<我爱北京 ...

  6. Java集合类汇总记录--JDK篇

    接口类图 Java Collection由两套并行的接口组成,一套是Collection接口,一套是Map接口.例如以下图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  7. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  8. myeclipse下jsp页面汉字不能保存问题

    在JSP页面中写了些汉字,结果想保存时,却提示编码不对.真扯!说什么"ISO-9000"之类的东东. 我记得以前可以在eclipse的菜单"编辑"中指定当前文件 ...

  9. HDU 5371(2015多校7)-Hotaru&#39;s problem(Manacher算法求回文串)

    题目地址:HDU 5371 题意:给你一个具有n个元素的整数序列,问你是否存在这样一个子序列.该子序列分为三部分,第一部分与第三部分同样,第一部分与第二部分对称.假设存在求最长的符合这样的条件的序列. ...

  10. beego1---beego，bee环境配置

    1.配置环境变量GOPATH(代码路径,先在里面建立src,pkg,bin3个目录),GOROOT:go安装的目录,go安装目录下的bin目录放到Path环境变量. 安装完bee工具之后,bee 可执 ...