首页 > 其他 > 详细

canvas绘制扇形统计图

时间:2016-08-01 22:50:21      阅读:1402      评论:0      收藏:0      [点我收藏+]

今天偷懒了,把上次的作业代码记录在这里好了。

绘制简单的扇形统计图需要用到JS插件,绘制完以后的代码是这样的:

技术分享

今天有点晚了把代码记录一下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.2.js"></script>
<style>
*{ margin:0px; padding:0px;}
body{ text-align:center}
#can1{ width:400px; height:400px;}
</style>
</head>
<body>
<div style="width:400px; height:400px; margin:10px auto;">
<canvas id="can1" width="400" height="400"></canvas>
</div>
<script>
$(function(){
var canv=document.getElementById("can1");
var ctx=canv.getContext("2d");
var num=[300,300,300];
var col=["#F00","#00f","#060"]
var j=0,j1=0,j2=0,jiao=0;
var sun=0;
for(var i=0;i<num.length;i++){
sun=sun+num[i];
}
for(var i=0;i<num.length;i++){
j=2*Math.PI*num[i]/sun;
j2=j1+j;
ctx.beginPath();
ctx.fillStyle=col[i];
ctx.arc(canv.width/2,canv.height/2,120,j1,j2,false);
ctx.lineTo(canv.width/2,canv.height/2);

ctx.closePath();

ctx.fill();
jiao=j1+j/2;
ctx.font="20px Arial";
ctx.fillStyle="#000";
j1=j1+j;
}

})
</script>

</body>
</html>

好了,这个就是上面图形的代码,但是要加JS哦!

canvas绘制扇形统计图

原文:http://www.cnblogs.com/kulowreidyql/p/5727415.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!