js+HTML5 canvas 实现简单的加载条(进度条)功能示例
更新时间：2019年07月16日 11:35:30 作者：爱在彩虹
这篇文章主要介绍了js+HTML5 canvas 实现简单的加载条(进度条)功能,涉及javascript使用时间函数与canvas绘图结合实现进度条的相关操作技巧,需要的朋友可以参考下
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 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>
运行结果：
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
更多关于JavaScript相关内容还可查看本站专题：《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了JS实现n秒后自动跳转的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
javascript实现unicode与ASCII相互转换的方法
这篇文章主要介绍了javascript实现unicode与ASCII相互转换的方法,涉及JavaScript字符串的遍历、正则匹配及编码转换相关技巧,需要的朋友可以参考下2015-12-12
这篇文章主要分析了javascript单线程异步io回调的特性这个问题，希望我们整理的内容能帮助到你。2017-12-12
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单的3D立方体自动旋转的效果，文中的实现代码讲解详细，感兴趣的可以尝试一下2022-06-06
今天遇到一个问题，这个问题也是我以前遇到的问题，以前的方式，也是大多数人使用的方式。大家可以看看我的文章2012-06-06
这篇文章主要介绍了原生JavaScript写出Tabs标签页的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
TypeScript 是 JavaScript 的超集，TypeScript 经过编译之后都会生成 JavaScript 代码。TypeScript 最大的特点就是类型化，因此才叫做 TypeScript。比起弱类型的 JavaScript，类型化的 TypeScript 显得更加容易维护。2015-06-06
本文主要介绍JavaScript中利用transform实现数字翻页效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
兼容IE与firefox火狐的回车事件(js与jquery)
今天看了网上的朋友说了，很多网站提供的回车事件代码都是不兼容firefox的，其实脚本之家提供的代码，一直以来都是尽量的兼容多浏览器。2010-10-10
要拖动的div为最外层的div，这段代码对显示对话框的头部绑定鼠标监听事件，当鼠标移动时，整个div也相应的移动，具体的实现如下，感兴趣的朋友可以参考下2013-11-11
最新评论