canvas一周一练 -- canvas绘制饼图(3)
运行效果:
<!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)的更多相关文章
- canvas一周一练 -- canvas绘制中国银行标志(4)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制太极图(6)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制马尾图案 (5)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制立体文字(2)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制奥运五环(1)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- 带着canvas去流浪系列之三 绘制饼图
[摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 【带着canvas去流浪】 (3)绘制饼图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...
- HTML5 Canvas(实战:绘制饼图2 Tooltip)
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...
随机推荐
- 基于cocos2d-x-3.2学习Box2D(一)
cocos版本号:cocos2d-x-3.2 环境:Win7+VS2013 因为一些太底层的实现我如今的能力学习不到,仅仅能做一些简单的笔记,供以后翻阅.假设别人可以得到帮助,莫大的荣幸. 一.创建世 ...
- WebForms UnobtrusiveValidationMode 须要“jquery”ScriptResourceMapping。
一.问题产生的背景: 在敲牛腩新闻公布系统的后台登录页面的时候,我们用到了RequiredFieldValidator控件(验证非空控件),该控件的作用是禁止输入规定的内容,RequiredField ...
- Swift新手教程系列5-函数+selector在swift中的使用方法
原创blog.转载请注明出处 近期在用swift写代码,尽管遇到一些问题,可是代码量确实减了不少. swfit新手教程系列会随着我使用swfit中的积累,不断地去修正更新 之前的教程 swift单例模 ...
- PromiseKit入门
原文:Getting Started with PromiseKit 作者:Michael Katz 译者:kmyhy 异步编程真的让人头疼.不管你怎样小心,总是easy出现臃肿的托付.混乱的完毕句柄 ...
- nginx进程和实时控制
原文地址:http://nginx.com/resources/admin-guide/processes-and-runtime-control/ Processes and Runtime Con ...
- ubuntu下apache+mysql+php+mysql等之webserver搭建
相信非常多人跟我一样,想搭建一个自己的webserver.网上资料非常多.可是因为版本号的区别,总是存在依照一个教程来做无法全然实现的问题.近期我也折腾了好几天,google不能用,仅仅能百度,真想说 ...
- google免费DNSserver好用不?
中国的网络实在不行,网速一直就是令人诟病. 比韩日那是差太多了,可是相比非洲还是不错.可是这根本无法满足国人的上网需求.于是大家都想破了脑袋想提高网速.这不方法来了么? 笔者在网上找了几种方法关于怎样 ...
- 使用mpxj读取MSPrjoect
import java.util.ArrayList; import java.util.Calendar; import java.util.Hashtable; import java.util. ...
- AWK学习总结(三) Records and Fields
AWK 记录和域 The NR Variable % awk '{print NR, $0}' employees 1 Tom Jones 4424 5/12/66 543354 2 Mary Ada ...
- go14--并发concurrency,Goroutine ,channel
package main /** 并发concurrency 很多人都是冲着 Go 大肆宣扬的高并发而忍不住跃跃欲试,但其实从 源码的解析来看,goroutine 只是由官方实现的超级“线程池”而已. ...