canvas绘制扇形统计图

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

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

时间: 2024-10-07 05:06:38

canvas绘制扇形统计图的相关文章

用canvas 绘制的饼状统计图、柱状统计图、折线统计图

canvas 绘制的饼状统计图 canvas 绘制的柱状统计图 canvas 绘制的折线统计图

用canvas绘制的饼状图,6等分,颜色随机

都说程序员懒,生活还是不能懒的,比如洗头.洗脸,当然也包括是分享咯.下面分享一下我用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,我还做了随机生成数据的, 配上文字,每份所占的比例就显而意见.,这点用在分析数据还是挺好的.图片如下; canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.. 基本使用语法: 使用

Sliverlight实例之 绘制扇形和环形图

原文:Sliverlight实例之 绘制扇形和环形图 未解决: 1,任意偏角,是个重点问题: (1),  另一边在弧上坐标 (2),  这个弧的弧度(ArcSegment中的Size或Angle属性) (3),  如何把这个弧度做成依赖属性配置的 2,做成一个自定义控件 有时间,再完成 准备知识: 1,  平面几何思维(三角形,圆,弧,曲线,斜率,方程式) 2,  三次贝塞尔曲线的数学公式 3,  定时器与动画的区别是时间序列 4,  缓动动画   一,1道几何题 已知两点坐标确定一条直线,直线

Android Canvas绘制

public class DrawView extends View { public DrawView(Context context) {  super(context); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  /*   * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形   * drawLine

canvas 二 canvas绘制表盘,及canvas曲线的绘制

/** * 绘制圆 * arc(x,y,半径,起始弧度,结束弧度,旋转方向) * x,y起始位置 * 弧度与角度的关系 : 弧度 = 角度*Math.PI/180 * 旋转方向:顺时针(默认false).逆时针(true) */ var oc = document.getElementById('canvas'); var ogc = oc.getContext('2d'); //实例1绘制扇形 ogc.moveTo(200,200); ogc.arc(200,200,150,0,90*Math

用canvas绘制折线图

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用canvas绘制折线图</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 </body> 1

封装 用canvas绘制直线的函数--面向对象

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用面向对象的思想 封装 在canvas绘制直线的函数</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 &

canvas绘制时钟

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas绘制钟表</title> <style type="text/css"> #canvas{ /*border: 2px solid red;*/ display: block; margin: 0 auto; } </style> </

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht