运行效果:

<!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. 基于cocos2d-x-3.2学习Box2D(一)

    cocos版本号:cocos2d-x-3.2 环境:Win7+VS2013 因为一些太底层的实现我如今的能力学习不到,仅仅能做一些简单的笔记,供以后翻阅.假设别人可以得到帮助,莫大的荣幸. 一.创建世 ...

  2. WebForms UnobtrusiveValidationMode 须要“jquery”ScriptResourceMapping。

    一.问题产生的背景: 在敲牛腩新闻公布系统的后台登录页面的时候,我们用到了RequiredFieldValidator控件(验证非空控件),该控件的作用是禁止输入规定的内容,RequiredField ...

  3. Swift新手教程系列5-函数+selector在swift中的使用方法

    原创blog.转载请注明出处 近期在用swift写代码,尽管遇到一些问题,可是代码量确实减了不少. swfit新手教程系列会随着我使用swfit中的积累,不断地去修正更新 之前的教程 swift单例模 ...

  4. PromiseKit入门

    原文:Getting Started with PromiseKit 作者:Michael Katz 译者:kmyhy 异步编程真的让人头疼.不管你怎样小心,总是easy出现臃肿的托付.混乱的完毕句柄 ...

  5. nginx进程和实时控制

    原文地址:http://nginx.com/resources/admin-guide/processes-and-runtime-control/ Processes and Runtime Con ...

  6. ubuntu下apache+mysql+php+mysql等之webserver搭建

    相信非常多人跟我一样,想搭建一个自己的webserver.网上资料非常多.可是因为版本号的区别,总是存在依照一个教程来做无法全然实现的问题.近期我也折腾了好几天,google不能用,仅仅能百度,真想说 ...

  7. google免费DNSserver好用不?

    中国的网络实在不行,网速一直就是令人诟病. 比韩日那是差太多了,可是相比非洲还是不错.可是这根本无法满足国人的上网需求.于是大家都想破了脑袋想提高网速.这不方法来了么? 笔者在网上找了几种方法关于怎样 ...

  8. 使用mpxj读取MSPrjoect

    import java.util.ArrayList; import java.util.Calendar; import java.util.Hashtable; import java.util. ...

  9. AWK学习总结(三) Records and Fields

    AWK 记录和域 The NR Variable % awk '{print NR, $0}' employees 1 Tom Jones 4424 5/12/66 543354 2 Mary Ada ...

  10. go14--并发concurrency,Goroutine ,channel

    package main /** 并发concurrency 很多人都是冲着 Go 大肆宣扬的高并发而忍不住跃跃欲试,但其实从 源码的解析来看,goroutine 只是由官方实现的超级“线程池”而已. ...