您的位置：首页 > Web前端 > HTML5

基于html5 canvas的进度显示图表

2014-08-31 17:22 676 查看
文章出处：/article/8253430.html

Canvas的基本用法请参考这里，有对canvas的具体说明和浏览器版本的支持情况。

效果图：



1.Canvas的坐标系

Canvas中的坐标如图所示：



左上角为坐标原点，水平向右为X轴递增，垂直向下为Y轴递增。明白坐标系，就可以清晰的认识到如何计算坐标值。

但是，这个坐标系和我们平时的不一样，为了适合我们平时的习惯，就需要进行坐标系的转换，在这里不用提供的一些函数，如translate、scale等等，自己进行坐标的转换。
我们以坐标系中的某一点为中心（x‘ ，y’），我们假设画布的大小为100,100，中心点为（50,50），则转换坐标的函数为：
x坐标转化： x = x‘ + 50，其中x’为我们转化后的坐标系的值，x为Canvas坐标系的值
y坐标的转化： y = 50 - y’，同上；



转换之后，我们就可以按照习惯来使用了。

2.Canvas的画图API

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');

这两句就是先拿到Canvas的元素，载使用getContext拿到画布的画笔对象，也就是CanvasRenderingContext2D，多次取值都会拿到同一个对象。

g.beginPath();//开始一条新的路径
g.moveTo(0,0);//移动画笔到（0,0）点
g.lineTo(100,0);//从（0,0）点到（100,0）点画线，当前点为（100,0）
g.lineTo(100,100);//从当前点（100,0）到（100,100）点画线，当前点为（100,100）
g.lineTo(0,100);//从当前点（100,100）到（0,100）点画线，当前点为（0,100）
g.closePath();//关闭路径，将终点与起点进行闭合
g.lineWidth = 2;//线的宽度为2
g.stroke();//描边画线

从上面就可以看出来，到最后调用stroke的时候，才会把线条画出来，之前的都不止过是路径，没有真真的画上去。

g.arc(50,50,45,0,1,false);//画圆弧，（50,50）为圆心坐标，45为圆的半径，0为其实角度（弧度），1为终止角度（弧度），false为顺时针画弧


//角度转化为弧度

//角度转化为弧度制
function rad(angle){
return angle * Math.PI / 180;
}


3.图表制作

效果图：

HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制进度图表</title>
<script type="text/javascript" src="draw-chart.js"></script>
</head>
<body>

<div style="width: 100px;height: 100px; float: left; position: relative;">
<canvas id="mycanvas" width=100 height=100></canvas>
<label id="mytitle"></label>

<button onclick='paint()'>绘制</button>
</div>

<script type="text/javascript">
function paint(){
showChart("mycanvas","mytitle",50);

}

</script>
</body>
</html>


js代码：
	/**
* 绘制进度图表
* @param cs 	画布的ID
* @param lb 	显示进度的标签ID
* @param value 需要显示的进度值[0,100]
*/
function showChart(cs,lb,value){
//如果不符合取值范围，则返回
if(value > 100 || value < 0) return;
//拿到画布和标签元素
var canva = document.getElementById(cs);
var title = document.getElementById(lb);
canva.width = canva.width;
title.textContent = "";

//设置标签样式
title.style.cssText = "display: block; position: absolute; top: 32px; left: 33px; font-size: 25px;font-family: Fantasy;";
//拿到画布的上下文对象
var g = canva.getContext('2d');
g.beginPath();
g.moveTo(0,0);
g.lineTo(100,0);
g.lineTo(100,100);
g.lineTo(0,100);
g.closePath();
g.lineWidth = 2;
g.stroke();
//画出图像
//先画出底盘，再画出进度值
draw(500,100,"#CCCCCC",false,function(){
draw(500,value,"green",true);
});

title.textContent = formatTitle(0);
//角度转化为弧度制
function rad(angle){
return angle * Math.PI / 180;
}//横坐标转化
function tx(x){
return x + 50;
}
//纵坐标转化
function ty(y){
return 50 - y;
}
//格式化标签的显示值，当为以为数字时，前面自动补个0
function formatTitle(value){
value += "%";
return value.length == 1 ? 0 + value : value;
}

/**
* 画出圆环
* @param time 		绘制需要的时间，也就是动画的时间
* @param value 	画圆环的百分比值【0,100】
* @param color 	圆环的颜色值
* @param show 		是否显示进度值
* @param callback 	回调函数
*/
function draw(time,value,color,show,callback){
//计算循环次数
var count = Math.floor(time / 50);
//总共需要画出圆环的角度
var angle = value / 100 * 360;
//每次需要画出的圆环角度
var per = Math.floor(angle / count);
var cur = -90;
var pass = 0;
var c = color || "green";
//设置画笔的样式等
g.fillStyle= c;
g.strokeStyle = c;
g.lineWidth = 1;
if(!angle) return;

var perValue = Math.floor(value / count);
var curValue = 0;
var timer = setInterval(function(){
//debugger
if(pass < angle && pass + per > angle){
per = angle - pass;
perValue = value - curValue;
}
//画出部分圆环
g.beginPath();
g.arc(tx(0),ty(0),45,rad(cur),rad(cur + per),false);
//g.lineTo(tx(30 * Math.cos(rad(cur + per))),ty(30 * Math.sin(rad(cur + per))));
g.arc(tx(0),ty(0),35,rad(cur + per),rad(cur),true);
//g.lineTo(tx(40 * Math.cos(rad(cur))),ty(40 * Math.sin(rad(cur))));
g.closePath();
g.fill();
g.stroke();
if(show){
curValue += perValue;
if(curValue == 100) title.style.left = "25px";
title.textContent = formatTitle(curValue);
}

pass += per;
cur += per;
//圆环完成后，清除timer，并执行回调函数
if(pass >= angle){
clearInterval(timer);
if(callback) callback();
}
},50);
}
}


先画出底盘圆环，最后画出进度圆环，上面就是所有的代码。运行效果如图：

点击绘制可重新绘图。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航