js+HTML5 canvas 实现简单的加载条(进度条)功能示例


Posted in Javascript onJuly 16, 2019

本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>3water.com canvas实现加载条动画</title>
  </head>
  <body>
    <canvas id="loadingProgressCanvas"></canvas>
    <script>
      /*
       * 获取canvas, canvas本身没有画图能力,相当于一个画布,提供绘制图形的地方
       * document.getElementsByTagName("canvas")[0]
       * document.querySelector("canvas")/document.querySelector("#loadingProgressCanvas")
       * document.querySelectorAll("canvas")[0]
       */
      var loadingProgressCanvas = document.getElementById("loadingProgressCanvas");
      var ctx = loadingProgressCanvas.getContext("2d"); // 获取绘制图形的对象(画笔)
      drawFirst(); // 绘制初始状态
      var progress = 0; // 定义进度
      drawProgress(); // 绘制初始进度
      // 定义定时器, 100ms钟绘制5%
      var timer = setInterval("drawProgress()", 100);
      // 绘制初始状态
      function drawFirst() {
        ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条
        /*
         * 定义矩形(左上角x/y左边,宽高)
         */
        ctx.rect(0, 0, 200, 30);
        ctx.stroke(); // 绘制定义好的矩形路径
        ctx.fillStyle="#0000ff"; // 定义画笔颜色, 重新绘制已经加载的进度条
      }
      // 绘制进度条
      function drawProgress() {
        if(progress == 200) {
          progress = 0;
          ctx.clearRect(0, 0, 200, 30); // 清楚之前的绘制
        } else {
          ctx.moveTo(progress, 0); // 移动到上一次绘制的终点,准备绘制下一次的进度
          ctx.fillRect(progress, 0, 10, 30); // 200 * 0.05
          progress += 10;
        }
      }
    </script>
  </body>
</html>

运行结果:

js+HTML5 canvas 实现简单的加载条(进度条)功能示例

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现冻结表格行和列
Apr 29 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
微信小程序-API接口安全详解
Jul 16 #Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JavaScript解析JSON数据示例
Jul 16 #Javascript
微信小程序 Storage更新详解
Jul 16 #Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 #Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
JS实现的排列组合算法示例
Jul 16 #Javascript
You might like
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
用户注册常用javascript代码
2009/08/29 Javascript
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
React中的refs的使用教程
2018/02/13 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python flask框架端口失效解决方案
2020/06/04 Python
python如何建立全零数组
2020/07/19 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
德尔福集团DELPHI的笔试题
2012/02/22 面试题
初中三好学生自我鉴定
2014/04/07 职场文书
技校毕业生自荐书
2014/05/23 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
开平碉楼导游词
2015/02/06 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
清明节主题班会
2015/08/14 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
Python进度条的使用
2021/05/17 Python
Pytorch可视化的几种实现方法
2021/06/10 Python