基于html5 canvas的进度显示图表

来源：互联网发布：java 可变数组编辑：程序博客网时间：2024/05/15 09:22

文章出处：http://blog.csdn.net/huoer_12/article/details/38960955

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

效果图：

chart_111

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;//线的宽度为2g.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;}//格式化标签的显示值，当为以为数字时，前面自动补个0function 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(){//debuggerif(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);}}

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

点击绘制可重新绘图。

0 0