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

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

www.jb51.net canvas实现加载条动画

* 获取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;

}

运行结果：

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

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

html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例相关推荐

js+html5 canvas全屏彩色条状海浪动画js特效
下载地址基于js+html5 canvas制作的一款好看的全屏彩色条状海浪动画特效. dd:
html5 自动扣图,js+html5 canvas实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
html 写字版插件,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
写字板能用html语言吗,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
php写字板代码,JS+HTML5 Canvas实现简单的写字板功能示例
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能.分享给大家供大家参考,具体如下: 先来看运行效果: 具体代码如下: www.jb51.net JS写字板 body,html { pa ...
图片怎么转为html5,将图片转化为矢量并canvas化的容易工具(基于Node.js + HTML5 canvas)...
将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas) 一.前言最近需要做一个图标的矢量化,但是没有数据,因此采用了node.js作为数据处理工具,canva ...
【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
js - 预加载+监听图片资源加载制作进度条
这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图本 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...

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

html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例相关推荐

最新文章

热门文章