使用canvas绘制扇形图
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.strokeStyle='1px solid #000';
var data = [{
"value": .2,
"color": "red",
"title": "应届生"
},{
"value": .3,
"color": "blue",
"title": "社会招生"
},{
"value": .4,
"color": "green",
"title": "老学员推荐"
},{
"value": .1,
"color": "#ccc",
"title": "公开课"
}];
var tempAngle = -90;
//设置角度的中间变量
var x0 = 400, y0 = 400;
var radius = 200;
// 从-90度开始绘制
for( var i = 0; i < data.length; i++ ) {
ctx.beginPath();//因为设置不同的颜色，所以每次绘制完起一个新状态
ctx.moveTo(x0,y0);
//当前扇形的角度
var angle = data[i].value * 360;
ctx.fillStyle = data[i].color;
//开始从 tempAngle绘制
var startAngle = tempAngle * Math.PI / 180;
//从tempAngle绘制到 我们自己的angle区域
var endAngle = (tempAngle + angle) * Math.PI / 180;
//参数： x0，y0 圆心坐标， radius：半径
// startAngle：开始绘制的弧度
// endAngle：结束绘制的弧度！！
ctx.arc(x0, y0, radius, startAngle, endAngle);
ctx.fill();
tempAngle += angle;//下一次绘制的起始角度
}
}())
</script>
</body>
</html>
使用canvas绘制扇形图的更多相关文章
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- canvas 绘制八卦图
绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...
- canvas绘制折线图(仿echarts)
遇到的问题:Retina屏上字体线条模糊问题 解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" ...
- canvas 绘制星座图（好玩）--转载
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- canvas绘制折线图
效果图: 重难点: 1.画布左上角的顶点的坐标为(0 ,0),右下角的坐标最大,与平常思维相反 2.数据的处理 html代码: <!DOCTYPE html><html lang=& ...
随机推荐
- iOS获取真机沙盒文件、获取真机本地数据
有时我们需要对真机内的数据进行分析,那么如何获取沙盒所有数据文件呢? 1.设备连接到电脑,打开xcode 2.打开window-devices 3.打开后,选择设备名,选择app,导出数据 4.最后拿 ...
- scp的两种方式
如果host A 与 host B建立了信任连接(B有A的public key),那么从A向B传送文件,或者从B上传回文件都可以省略密码.但是前提是命令是在A上执行的. 从A向B拷贝文件 on hos ...
- MySQL常见错误代码及代码说明
1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败<=================可以忽略 1008:数据库不存在,删除数据库失败<======== ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- TCP/IP 详解7 Ping指令
首先介绍一下ping 指令的基本过程:(这部分摘自网络) 我们以下面一个网络为例:有A.B.C.D四台机子,一台路由RA,子网掩码均为255.255.255.0,默认路由为192.168.0.1 1. ...
- Firefox 网络调试工具
1.Firefox 简介 Firefox 官网下载地址 Firefox 其它下载地址 Firefox 58.0.2 for Mac,密码:346y. Firefox 36.0.4 for Mac,密码 ...
- java导出txt文件
1:vm模板页面的代码片段 <div class="col-sm-1"> <button type="button" class=" ...
- 一步一步掌握java的线程机制(二)----Thread的生命周期
之前讲到Thread的创建,那是Thread生命周期的第一步,其后就是通过start()方法来启动Thread,它会执行一些内部的管理工作然后调用Thread的run()方法,此时该Thread就是a ...
- Oracle 12C -- ADRCI查看DDL日志
$ adrci ADRCI: Release - Production on Tue Nov :: Copyright (c) , , Oracle and/or its affiliates. Al ...
- ORA-01917: user or role 'PDB_DBA' does not exist
在使用seed PDB创建新的PDB的时候,报了以下错误提示: SQL> create pluggable database pdb2 admin user admin1 identified ...