文章搬至CSDN, 最新内容请访问: http://blog.csdn.net/redstarofsleep/article/details/45092115
先看一下画出来的效果,如下图,这样一个圆环形的进度.
我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,
首先是HTML页面,HTML5的文档标识是:
<!DOCTYPE html>
这个文档标识要比HTML4的简单多了.
第二步,在页面上创建一个Canvas画布元素:
<canvas class="process" width="48px" height="48px">61%</canvas>
我这里创建了一个长宽都是48像素的画布,因为我要画的圆外直径是48个像素的,在canvas元素中间写的是"61%",这个文字可不是显示在圆环中间的那个哦,这个61%是当老的浏览器不支持canvas元素时显示的文字.
好了,到此为止HTML页面的内容就基本完成了,接下来就交给Javascript了,用Javascript来描绘圆环.
function drawProcess() { // 选出页面上所有class为process的canvas元素,然后迭代每一个元素画图(这里用Jquery的选择器选的) $('canvas.process').each(function() { // 第一部先拿到canvas标签中间的文字,就是那个61%(这里的stringTrim方法是我自己的方法,去前后空格的方法很多的,这里就不贴出来了) var text = commonutil.stringTrim($(this).text()); var process = text.substring(0, text.length-1); // 一个canvas标签 var canvas = this; // 拿到绘图上下文,目前只支持"2d" var context = canvas.getContext('2d'); // 将绘图区域清空,如果是第一次在这个画布上画图,画布上没有东西,这步就不需要了 context.clearRect(0, 0, 48, 48); // ***开始画一个灰色的圆 context.beginPath(); // 坐标移动到圆心 context.moveTo(24, 24); // 画圆,圆心是24,24,半径24,从角度0开始,画到2PI结束,最后一个参数是方向顺时针还是逆时针 context.arc(24, 24, 24, 0, Math.PI * 2, false); context.closePath(); // 填充颜色 context.fillStyle = '#ddd'; context.fill(); // ***灰色的圆画完 // 画进度 context.beginPath(); // 画扇形的时候这步很重要,画笔不在圆心画出来的不是扇形 context.moveTo(24, 24); // 跟上面的圆唯一的区别在这里,不画满圆,画个扇形 context.arc(24, 24, 24, 0, Math.PI * 2 * process / 100, false); context.closePath(); context.fillStyle = '#e74c3c'; context.fill(); // 画内部空白 context.beginPath(); context.moveTo(24, 24); context.arc(24, 24, 21, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgba(255,255,255,1)'; context.fill(); // 画一条线 context.beginPath(); context.arc(24, 24, 18.5, 0, Math.PI * 2, true); context.closePath(); // 与画实心圆的区别,fill是填充,stroke是画线 context.strokeStyle = '#ddd'; context.stroke(); //在中间写字 context.font = "bold 9pt Arial"; context.fillStyle = '#e74c3c'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.moveTo(24, 24); context.fillText(text, 24, 24); }
好了,画完了.要看到效果别忘了调用一下画图的drawprocess方法哦.
转载请注明出处
相关推荐
主要介绍了HTML5canvas绘制一个圆环形的进度表示实例的相关资料,需要的朋友可以参考下
html5 canvas画布绘制圆形时钟代码
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
html5 canvas绘制3D地球旋转动画特效
html5 canvas绘制七巧板图形代码 html5 canvas绘制七巧板图形代码
jquery html5 图表用canvas绘制一个动画圆形饼图
网页模板——基于html5 canvas绘制发光的圆点动画特效源码
html5 canvas绘制射箭小游戏下载 html5 canvas绘制射箭小游戏下载
html5结构图canvas绘制组织结构图框架代码 html5结构图canvas绘制组织结构图框架代码
html5 canvas绘制圆形气泡背景动画特效
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
html5 canvas 绘制动态心电图,根据医院里的一模一样。 html5 canvas 绘制动态心电图,根据医院里的一模一样。
ECG html canvas绘制心电图
基于html5 canvas绘制发光的圆点动画特效源码.zip
html5 canvas绘制彩色密集圆点粒子旋转特效源码.zip
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
html5 canvas绘制沙丁鱼群动画特效