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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python实现的系统实用log类实例
2015/06/30 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python连接数据库的方法
2017/10/19 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python的中异常处理机制
2018/08/30 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
原料仓仓管员岗位职责
2014/07/08 职场文书
考研英语复习计划
2015/01/19 职场文书
写给医生的感谢信
2015/01/22 职场文书
民事起诉状范文
2015/05/19 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
2016春季运动会前导词
2015/11/25 职场文书
《落花生》教学反思
2016/02/16 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang