canvas画饼图
<style>
body {
background: black;
text-align: center;
}
#cans {
background: white;
}
</style>
<script>
function disToRad(n){//将度数表示弧度计算的方法
return n*Math.PI/180;//π用PI表示，π=180°，所以1°=PI/180
}
window.onload=function(){
let cans=document.getElementById("cans");//获取画布
let ctx=cans.getContext("2d");//创建画板
let cx=300;//设置x轴初始位置坐标(即圆的中心坐标)
let cy=200;//设置y轴初始位置坐标(即圆的中心坐标)
let r=150;//半径
function pie(startAng,endAng,color){//创建一个画扇形的方法
let nx,ny;//x轴初始位置坐标
ctx.beginPath();//防止之前画好的部分受后面画的影响
ctx.moveTo(cx,cy);//画笔开始坐标(即圆的中心坐标)
nx=cx+Math.sin(disToRad(startAng))*r;//弧线初始点的x轴坐标
ny=cy-Math.cos(disToRad(startAng))*r;
ctx.lineTo(nx,ny);//设置终点坐标（弧线初始点坐标）
ctx.arc(cx,cy,r,disToRad(startAng-90),disToRad(endAng-90),false);//画扇形，弧度=度数-90
ctx.closePath();//图形闭合
ctx.stroke();//描边
ctx.fillStyle=color;//设置填充颜色
ctx.fill();//填充
}
var data=[10,30,35,20,5];//表示度数的数组
let color=['red','green','yellow','blue','orange'];//表示颜色的数组
let sum=data.reduce(function(prev,current){
return prev+current;//求总和
})
let avgDegree=data.map(function(item){
return item/sum*360;//转换为角度
})
lastDegree=0;//设置初始度数
avgDegree.forEach(function(item,index){
pie(lastDegree,lastDegree+item,color[index]);//调用pie(),的分别循环换获取startAng,endAng,color
lastDegree+=item;
})
}
</script>
<body>
<canvas id="cans" height="800" width="1200">该浏览器不支持canvas元素操作,请更新浏览器</canvas>
</body>
效果如图：
canvas画饼图的更多相关文章
- 小程序使用Canvas画饼图
先上效果图 -------------------------------------------------------------wxml代码开始------------------------- ...
- canvas画扇形、饼图
画扇形的方法 方法一:起始角度是0,那么第一条线就是line(r,0),通过旋转扇形的角度,第二条线就是line(r,0) //圆弧 ctx.save(); ctx.translate(100, 10 ...
- （转）浅谈HTML5与css3画饼图！
神马系饼图? 饼图,大家都应该熟知,在统计数据对比方面,几乎处处用到.如cnzz的统计饼图 从饼图中,很形象地展示了访问者地区的分布,以扇形为块的方式拼成一个大圆. 都使用什么方法实现 目前众多站点制 ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
随机推荐
- javascript 树形菜单
1. [代码][JavaScript]代码 var ME={ini:{i:true,d:{},d1:{},h:0,h1:0,h2:0},html:function(da,f){var s='& ...
- html5--6-13 CSS3中的颜色表示方式
html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...
- asp.net微软图表控件MsChart
前段时间,开发项目时,由于需要,需要将一些数据统计,并以图表形式显示.由于是asp.net,所以就找到了MsChart图表控件,还是挺方便实用的,分享一下. MsChart控件的主要组成如图所示 工具 ...
- NIO与IO的区别
nio是new io的简称,从jdk1.4就被引入了.现在的jdk已经到了1.6了,可以说不是什么新东西了.但其中的一些思想值得我来研究.这两天,我研究了下其中的套接字部分,有一些心得,在此分享. ...
- 使用GAC加速 解决CSP问题 Kakuro - Cross Sums
Kakuro - Cross Sums 问题如下 一个简单的例子 可以看出限制条件是某行或某列的某几个空白格子求和等于某个值,且每一个限制中的格子所填的数必须为1-9且互异. 直接暴力搜索,空白格子太 ...
- 怎样在github上协同开发
How to co-work wither parter via github. Github协同开发情景模拟 Github不仅有很多开源的项目可以参考,同样也是协同开发的最佳工具,接下来的就模拟一下 ...
- Cg profiles，如何使用CGC编译Cg语言（转）
抄“GPU Programming And Cg Language Primer 1rd Edition” 中文名“GPU编程与CG语言之阳春白雪下里巴人” 计算机只能理解和执行由0.1序列(电压序列 ...
- kettle系列-我的开源kettle调度、管理平台[kettle-manager]介绍
kettle管理工具 专门为kettle这款优秀的ETL工具开发的web端调度.管理工具. 新版本 项目简介 kettle作为非常优秀的开源ETL工具得到了非常广泛的使用,一般的使用的都是使用客户端操 ...
- python 模块和包的使用方法
一.模块 1.import导入模块 import module1,mudule2... 2.from...import...导入模块 导入指定内容 from modname import name1[ ...
- 黑客攻防技术宝典web实战篇：Web 应用程序技术习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. OPTIONS 方法有什么作用? OPTIONS 方法要求服务器报告可用于特定资源的 HT ...