canvas绘制扇形统计图

最新推荐文章于 2022-11-25 16:47:01 发布

weixin_30483495

最新推荐文章于 2022-11-25 16:47:01 发布

阅读量369

点赞数

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

版权

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

绘制简单的扇形统计图需要用到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);