HTML5-canvas实例：2D折线数据图与2D扇形图
基础知识：
<canvas id="demo" width="400" height="400"></canvas>
在页面上创建canvas标签，然后获取canvas这个元素，因为是画2D图，所以是调用.getContext('2d') 二维图方法
var target = document.getElementById('demo'),
pic = target.getContext('2d');
canvas作图的平面空间，该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。
部分API的介绍：
pic.beginPath(); //创建开始描绘路径（每一条线都需要重新创建一次，否则以后的操作【如填充颜色】都会反映在此路径）
pic.moveTo(0, 0); //描绘的起点
pic.lineTo(100,100); // 设置描绘线的终点，可以调用多次（以上次的终点为起点，继续描绘）
pic.lineTo(240,340);
pic.lineWidth = 1; //设置宽度
pic.strokeStyle = '#259'; //设置颜色
pic.stroke(); //填充
pic.closePath(); //关闭此路径，可选
封装：
描绘路径必需知道起点坐标与终点坐标，因为可能是多次描绘，所以就需要用到二维数组把各个坐标保存下来，如[ [0,0],[100,50],[2,50] ]，然后遍历二维数组，多次调用lineTo方法进行描绘。封装函数如下：
// 画线
function drawContLine(opt){
pic.beginPath();
var path = opt.path,//[[0,0],[20,30]......]
color = opt.color;
pic.moveTo(path[0][0],path[0][1]);
var n = 1,
len = path.length;
for(;n<len;n++){
pic.lineTo(path[n][0],path[n][1]);
}
pic.lineWidth = 1;
pic.strokeStyle = color;
pic.stroke();
pic.closePath();
}
例子：月份成绩分数对比曲线图
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<title>Document</title>
<style type="text/css">
.ui-fill{border:1px solid #666;border-top:none;border-right:none;width:400px;height:400px;margin:50px auto;position:relative;}
.scroe span{position:absolute;left:-40px;}
.a10{top:-10px;}.a9{top:30px;}.a8{top:70px;}.a7{top:110px;}.a6{top:150px;}
.a5{top:190px;}.a4{top:230px;}.a3{top:270px;}.a2{top:310px;}.a1{top:350px;}
.year span{position:absolute;top:410px;white-space:nowrap;color:#700404;}
.y1{left:70px;}.y2{left:150px;}.y3{left:230px;}.y4{left:310px;}.y5{left:390px;}
</style>
</head>
<body>
<div class="ui-fill">
<canvas id="demo" width="400" height="400"></canvas>
<div class="scroe">
<span class="a1">10</span>
<span class="a2">20</span>
<span class="a3">30</span>
<span class="a4">40</span>
<span class="a5">50</span>
<span class="a6">60</span>
<span class="a7">70</span>
<span class="a8">80</span>
<span class="a9">90</span>
<span class="a10">100</span>
</div>
<div class="year">
<span class="y1">1月</span>
<span class="y2">2月</span>
<span class="y3">3月</span>
<span class="y4">4月</span>
<span class="y5">5月</span>
</div>
</div>
<script type="text/javascript">
var target = document.getElementById('demo');
var pic = target.getContext('2d');
//参数
var sum = 400,
ratio = 400/100;
// 画线
function drawContLine(opt){
pic.beginPath();
var path = opt.path,//[[0,0],[20,30]......]
color = opt.color;
pic.moveTo(path[0][0],path[0][1]);
var n = 1,
len = path.length;
for(;n<len;n++){
pic.lineTo(path[n][0],path[n][1]);
}
pic.lineWidth = 1;
pic.strokeStyle = color;
pic.stroke();
pic.closePath();
}
// 刻度线
(function(){
var scale = 20,
i = sum/scale,
n = 0;
for(;n<i;n++){
drawContLine({'path':[[scale*n*4,0],[scale*n*4,sum]],'color':'#f4f4f4'});
drawContLine({'path':[[0,scale*n],[sum,scale*n]],'color':'#f4f4f4'});
}
})();
// 分数转化为坐标输出
function transforCoor(opt){
var scroes = opt.scroes,
scale = 20*4,
n = 0,
len = scroes.length,
a_path = [];
for(;n<len;n++){
var x = sum - scroes[n]*ratio;
var arry = [scale*(n+1),x];
//console.log(arry);
a_path.push(arry);
} drawContLine({'path':a_path,'color':opt.color});
}
transforCoor({'scroes':[90,80,98,70,60],'color':'#259'});
transforCoor({'scroes':[88,86,85,84,85],'color':'#f60'});
</script>
</body>
</html>
扇形图：
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
arc方法的x和y参数是圆心坐标，radius是半径，startAngle和endAngle则是扇形的起始角度和终止角度（以弧度表示，Math.PI*2表示360度），anticlockwise表示做图时应该逆时针画（true）还是顺时针画（false）
例子：
<canvas id="j_canvas" width="300" height="300"></canvas>
<script type="text/javascript">
/*
* @param {obj}
* @param {string} id canvas的id
* @param {array} colors 颜色
* @param {array} pers 占的比值（小数格式）
*/
function drawSector(opt){
var target = document.getElementById(opt.id),
ctx = target.getContext('2d'),
colors = opt.colors,
pers = opt.pers,
n = 0,
len = colors.length,
w = target.getAttribute('width'),
v = 0,
s = 0,
e = 0;
for(;n<len;n++){
ctx.beginPath();
v = n==0?0:Number(pers[n-1]),
s = s + v,
e = e + Number(pers[n]);
ctx.arc(w/2, w/2, w/2, Math.PI*2*s, Math.PI*2*e,false);
//画出结束半径
ctx.lineTo(w/2,w/2);
ctx.fillStyle = colors[n];
ctx.fill();
}
}
drawSector({'id':'j_canvas','colors':['#259','#333','#f60','#999'],'pers':['0.2','0.4','0.3','0.1']});
</script>
HTML5-canvas实例：2D折线数据图与2D扇形图的更多相关文章
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
- Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
- HTML5 Canvas 绘制库存变化折线 画入库出库柱状图
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- 赠书：HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- HTML5 Canvas 2D绘图
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4851774. ...
- HTML5 Canvas图片操作简单实例1
1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...
- HTML5 Canvas制作雷达图实战
雷达图又叫蜘蛛网图,是一种对各项数据查看很明显的表现图,在很多游戏中,对游戏中的每个角色的分析图一般也用这种图. 下面,用HTML5的Cavas来实现雷达图. 效果 一.创建Canvas var mW ...
随机推荐
- mysql线上负载高怎么排查
作为一个开发人员或者数据库管理员,学会检查数据库运行情况是必不可少的工作.造成MySQL线程卡顿的原因有很多,但是无论是哪种原因,我们发现问题之后的第一要务就是解决问题,防止问题继续恶化.那么,应该如 ...
- 关于Python装饰器内层函数为什么要return目标函数的一些个人见解
https://blog.csdn.net/try_test_python/article/details/80802199 前几天在学装饰器的时候,关于装饰器内层函数调用目标函数时是否return目 ...
- Python并行编程(十四)：异步编程
1.基本概念 除了顺序执行和并行执行的模型以外,还有异步模型,这是事件驱动模型的基础.异步活动的执行模型可以只有一个单一的主控制流,能在单核心系统和多核心系统中运行. 在并发执行的异步模型中,许多任务 ...
- logging.basicConfig参数简介
通过logging.basicConfig函数对日志的输出格式及方式做相关配置 import logging logging.basicConfig(level=logging.DEBUG, form ...
- TCP协议通讯工作原理
TCP协议通讯工作原理 一.TCP三次握手 传输控制协议(Transport Control Protocol)是一种面向连接的,可靠的传输层协议.面向连接是指一次正常的TCP传输需要通过在TCP ...
- 【转】Deep Learning（深度学习）学习笔记整理系列之（七）
9.5.Convolutional Neural Networks卷积神经网络 卷积神经网络是人工神经网络的一种,已成为当前语音分析和图像识别领域的研究热点.它的权值共享网络结构使之更类似于生物神经网 ...
- Django的FBV和CB
Django的FBV和CBV FBV FBV(function base views) 就是在视图里使用函数处理请求. 在之前django的学习中,我们一直使用的是这种方式,所以不再赘述. CBV C ...
- redis入门学习记录（一）
1.linux在线下载Redis ,官网地址:https://redis.io/download目前,最新的Redist版本为redis-5.0.0,使用wget下载 进入/usr/local/src ...
- CF337C - Quiz
/*题目大意,给出n道题,假设答对了m道题,求最小的分数,有一个规则,就是连续答对num==k道题那么分数就翻倍,然后num清零,从新开始计数,到大连续k道的时候 要先加上这道题的分数1,再乘以2, ...
- 用 Python 和 OpenCV 检测图片上的条形码（转载）
原文地址:http://python.jobbole.com/80448/ 假设我们要检测下图中的条形码: # load the image and convert it to grayscale 1 ...