先看一下画出来的效果,如下图,这样一个圆环形的进度.

 我这里使用HTML5的Canvas来要制作这样一个圆环形的进度,

首先是HTML页面,HTML5的文档标识是:

这个文档标识要比HTML4的简单多了.

第二步,在页面上创建一个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绘制一个圆环形的进度表示的更多相关文章

  1. 【JavaScript】用JS绘制一个球

    参考: 1.http://www.w3school.com.cn/html5/html_5_canvas.asp 2.http://blog.csdn.net/qq_27626333/article/ ...

  2. PS如何绘制虚线圆

    1 绘制一个圆的路径   2 选择铅笔工具,然后点击"画笔笔尖形状",选好笔尖的直径和间距(不同的直径对应不同的间距,没有标准数值,自己推拉滑动条就可以了)   3 在路径选项卡, ...

  3. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

  4. 初识canvas,使用canvas做一个百分比加载进度的动画

    canvas作为H5中重要的新增特性,使开发者可以用它来创作各种令人惊叹的作品.先来看一下浏览器对canvas的支持情况. <canvas> 标签定义图形,比如图表和其他图像,我们使用脚本 ...

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

    一,1道几何题 已知两点坐标确定一条直线,直线上存在一个未知点,起始点与未知点的距离已知 求:未知点坐标 思路,如下: 求AB长度,可以根据两点距离公式 二,写个C#类 定义一个Point类,代表坐标 ...

  6. 使用canvas绘制一个时钟

    周末学习canvas的一些基础功能,顺带写了一个基础的时钟.现在加工一下,做的更好看一点,先放上效果图: 谈一些自己的理解: (1).要绘制一个新的样式(不想被其他样式影响,或者影响到其他样式),那么 ...

  7. Android圆环形颜色选择器:HoloColorPicker

    HoloColorPicker实现圆环形颜色选择器,可以改变颜色饱和度来选择颜色.选择颜色时,可以用手指沿着圆环滑动一个滑块,从而选择颜色. 添加以下XML至你的布局中: ? 1 2 3 4 < ...

  8. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  9. CDR中怎么绘制一个漂亮的球衣?

    cdr中怎么绘制一个漂亮的球衣?想要绘制一个漂亮的球衣,该怎么绘制呢?下面我们就来看看cdr绘制漂亮的球衣的教程,需要的朋友可以参考下: 1.画一个长方形,增加节点,移动节点,变形成如图 2.直线变曲 ...

随机推荐

  1. 第一章:1-10、试在下列条件下比较电路交换和分组交换。要传送的报文共x(bit),从源站到目的站共经过k段链路,每段链路的传播时延为d(s),数据率为C(bit/s)。在电路交换时电路的建立时间为s(s)。在分组交换时分组长度为p(bit),且各结点的排队等待时间可忽略不计。问在怎样的条件下,分组交换的时延比电路交换的要小?

    <计算机网络>谢希仁著第四版课后习题答案答:对电路交换,当t=s时,链路建立: 当t=s+x/C,发送完最后一bit:                 当t=s+x/C+kd,所有的信息到 ...

  2. c++ 堆、栈、自由存储区、全局/静态存储区和常量存储区

    在C++中,内存分成5个区,他们分别是堆.栈.自由存储区.全局/静态存储区和常量存储区. 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清楚的变量的存储区.里面的变量通常是局部变量.函数参数 ...

  3. AC日记——[HNOI2008]水平可见直线 bzoj 1007

    1007 思路: 维护一个下凸壳: 用单调栈来维护这玩意儿: 先将斜率排序: 然后判断栈顶元素和当前元素的交点x是否小于栈顶元素和栈顶上一个元素的交点x: 注意: 人神共愤的精度问题和输出空格问题: ...

  4. Dell Inspiron 7520 安装Ubuntu 14.04 LTS

    我的电脑是Dell Inspiron 7520,之前用的Windows 7, 装了虚拟机,再在虚拟机里面装Ubuntu, 电脑一直卡顿,一怒之下,升级了内存,直接16G,然后,还是卡顿,CPU是i5的 ...

  5. 51nod 1001 数组中和等于K的数对【二分查找/排序】

    1001 数组中和等于K的数对 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数,找出数组 ...

  6. Web常用方法

    1.返回一个json格式报文 /**     * 返回json格式字符串或普通字符串     *      * @param jsonString     */    protected void w ...

  7. 反汇编引擎Capstone

    反汇编引擎Capstone   Capstone是Kali Linux自带的一款轻量级反汇编引擎.它可以支持多种硬件构架,如ARM.ARM64.MIPS.X86.该框架使用C语言实现,但支持C++.P ...

  8. Matrix.LookAtLH()和Matrix.LookAtRH()所表达的涵义

    function lookAtLH(eye:Vector3D, at:Vector3D, up:Vector3D) 一个摄像机矩阵可有由三个部分组成:摄像机位置.目标位置以及摄像机上下方.对应的就是上 ...

  9. steelray project viewer

    steelray project viewer是一款英文语言软件,透过Steelray Project Viewer,可以打开.导航.浏览.打印Microsoft Project的.mpp文件.

  10. Redis2.8.7配置文件说明

    Redis master配置文件说明 daemonize no 默认情况下,redis不是在后台运行的,如果需要在后台运行,把该项的值更改为yes daemonize yes # 当redis在后台运 ...