web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
HTML5 canvas粒子飞射的loading进度条特效
分类:
进度条
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
##### HTML结构 这个loading进度条使用一个空的canvas来制作。 ```html
``` ##### JAVASCRIPT progressbar()函数用于绘制进度条,particle()函数用于绘制粒子。在draw()方法中判断当前进度条的总进度,在指定刻度时改变进度条的颜色。update()函数循环每一个粒子,不断的修改粒子的高度,从而制作出粒子飞射的效果。最后使用animloop()方法来不断的循环动画。 ```html particle_no = 25; window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var canvas = document.getElementsByTagName("canvas")[0]; var ctx = canvas.getContext("2d"); var counter = 0; var particles = []; var w = 400, h = 200; canvas.width = w; canvas.height = h; function reset(){ ctx.fillStyle = "#272822"; ctx.fillRect(0,0,w,h); ctx.fillStyle = "#171814"; ctx.fillRect(25,80,350,25); } function progressbar(){ this.widths = 0; this.hue = 0; this.draw = function(){ ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)'; ctx.fillRect(25,80,this.widths,25); var grad = ctx.createLinearGradient(0,0,0,130); grad.addColorStop(0,"transparent"); grad.addColorStop(1,"rgba(0,0,0,0.5)"); ctx.fillStyle = grad; ctx.fillRect(25,80,this.widths,25); } } function particle(){ this.x = 23 + bar.widths; this.y = 82; this.vx = 0.8 + Math.random()*1; this.v = Math.random()*5; this.g = 1 + Math.random()*3; this.down = false; this.draw = function(){ ctx.fillStyle = 'hsla('+(bar.hue+0.3)+', 100%, 40%, 1)';; var size = Math.random()*2; ctx.fillRect(this.x, this.y, size, size); } } bar = new progressbar(); function draw(){ reset(); counter++ bar.hue += 0.8; bar.widths += 2; if(bar.widths > 350){ if(counter > 215){ reset(); bar.hue = 0; bar.widths = 0; counter = 0; particles = []; } else{ bar.hue = 126; bar.widths = 351; bar.draw(); } } else{ bar.draw(); for(var i=0;i
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告