HTML5canvas 绘制一个圆环形的进度表示实例


Posted in Javascript onDecember 16, 2016

HTML5 canvas 绘制圆环形进度

先看一下画出来的效果,如下图,这样一个圆环形的进度.
HTML5canvas 绘制一个圆环形的进度表示实例

 我这里使用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 绘制一个圆环形的进度表示实例大小: 2.4 KB 查看图片附件

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
D3.js实现雷达图的方法详解
Sep 22 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
vue element项目引入icon图标的方法
Jun 06 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
JS数字千分位格式化实现方法总结
Dec 16 #Javascript
jquery插件锦集【推荐】
Dec 16 #Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 #Javascript
JS实现字符串转驼峰格式的方法
Dec 16 #Javascript
详解js数组的完全随机排列算法
Dec 16 #Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 #Javascript
基于Vue如何封装分页组件
Dec 16 #Javascript
You might like
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
主持人演讲稿
2014/05/13 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书