使用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=& ...
随机推荐
- Swift3 CADisplayLink简单用法
1.定义属性 var displayLinkTimer:CADisplayLink? = nil 2.init displayLinkTimer = CADisplayLink(target: sel ...
- SQLserver视图修改sql
语法: alter view dbo.视图名 as 更新后的视图SQL go 举个栗子: 原视图名为YOUR_VIEW其中SQL为: select * form TableA 更新视图: alter ...
- hibernate关联映射注解
转自:hibernate annotation注解方式来处理映射关系 在hibernate中,通常配置对象关系映射关系有两种,一种是基于xml的方式,另一种是基于annotation的注解方式,熟话说 ...
- 进阶之路（基础篇） - 001 亮一个led灯
/********************************* 代码功能:点亮一个led灯 使用函数: pinMode(引脚号,模式); digitalWrite(引脚号,电平状态); //默认 ...
- Entity Framework中实体模型命名空间的问题
在添加一个实体数据模型的时候(就是扩展名为edmx那位)属性里明明设置了自己的命名空间,但是后台的Designer.cs命名空间生成规则却是项目的默认命名空间加edmx文件所在文件夹的名称, 是BUG ...
- OpenCV 学习笔记03 drawContours函数
opencv-python 4.0.1 轮廓的绘制或填充. cv2.drawContours(image, contours, contourIdx, color[, thickness[, li ...
- Android如何实现点击一次返回键返回桌面而不是退出应用
具体代码如下所示: @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if (keyCode == KeyEvent. ...
- Android App解决卡顿慢之内存抖动及内存泄漏（发现和定位）
内存抖动是指在短时间内有大量的对象被创建或者被回收的现象,内存抖动出现原因主要是频繁(很重要)在循环里创建对象(导致大量对象在短时间内被创建,由于新对象是要占用内存空间的而且是频繁,如果一次或者两次在 ...
- 如何调试makefile变量
六.七年前写过一篇<跟我一起写Makefile>,直到今天,还有一些朋友问我一些Makefile的问题,老实说,我有一段时间没有用Makefile了,生疏了.回顾,这几年来大家问题我的问题 ...
- JPA学习笔记（8）——映射一对多关联关系
一对多关联关系 本文有很多和多对一是一样的,因此不会写得非常具体. 有看不懂的.能够參考JPA学习笔记(7)--映射多对一关联关系 Order实体类 package com.jpa.helloworl ...