文档章节

canvas实现网站粒子进度条效果

孟飞阳
 孟飞阳
发布于 2017/08/10 00:04
字数 301
阅读 33
收藏 1

效果图:

源码:

<html>
	<title></title>
	<header>
	<script src="jquery-1.8.0.js"></script>
	<script>
		$(document).ready(function(){
			var canvas = document.querySelector("#canvas");
			var ctx = canvas.getContext("2d");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

			var proHeight = 10;//进度条高度
			var proWidth = 0.9;//进度条宽度
			var proSpeed = 0.001;//进度条速度
			var num = 4;//粒子数目
			var bgColor = "#4f0e1d";//进度条背景色
			var proColor = "#fff";//进度条进度色
			var initX = canvas.width*(1-proWidth);//初始X坐标
			var initY = (canvas.height-proHeight)/2;//初始Y坐标
			var currentX = initX;//当前进度x坐标
			var scale = 1-proWidth;

			function drawBgProgress(){
				ctx.beginPath();
				ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
				ctx.moveTo(initX,initY);
				ctx.lineTo(canvas.width*proWidth,initY);
				ctx.arc(canvas.width*proWidth+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
				ctx.closePath();
				ctx.lineWidth = proHeight;
				ctx.strokeStyle = bgColor;
				ctx.stroke();
			}
			function drawProgress(){
				scale += proSpeed;
				if(scale>(proWidth+proSpeed)){
					scale = 1-proWidth;
					drawBgProgress();
				}
				currentX = canvas.width*scale;
				ctx.save();
				ctx.beginPath();
				ctx.arc(initX,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,false);
				ctx.moveTo(initX,initY);
				ctx.lineTo(currentX,initY);
				ctx.arc(canvas.width*scale+proHeight,initY,proHeight/20,Math.PI*0.5,Math.PI*1.5,true);
				ctx.closePath();

				ctx.lineWidth = proHeight;
				ctx.strokeStyle = proColor;
				ctx.shadowOffsetX = 0;//阴影X轴偏移
				ctx.shadowOffsetY = 0;
				ctx.shadowBlur = 30;
				ctx.shadowColor = 'rgba(255,255,255,0.8)';
				ctx.stroke();
				ctx.restore();
			}
			function drawPartitle(){
				var range = 65;
				for(var i=0;i<num;i++){
					var r=0.5+Math.random()*4;
					ctx.beginPath();
					ctx.arc(currentX-i*20,initY+i*Math.random()*10,r,0,Math.PI*2,false);
					ctx.arc(currentX-i*40,initY-i*Math.random()*30,r,0,Math.PI*2,true);
					ctx.closePath();
					ctx.fillStyle = "#CDA69F";
					ctx.fill();
				}
			}
			function update(){
				ctx.clearRect(0,0,canvas.width,canvas.height);
				drawBgProgress();
				drawProgress();
				drawPartitle();
			}
			setInterval(update,50);
		});
	</script>
	</header>
	<body>
		<canvas class="canvas" id="canvas" style="background:#000;"></canvas>
	</body>
</html>

 

本文转载自:恒星网络

上一篇: js 小数取整函数
下一篇: jquery移除css样式
孟飞阳
粉丝 212
博文 1012
码字总数 552718
作品 5
朝阳
个人站长
私信 提问
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
0
0
canvas实现粒子线条炫酷特效

  首先,用一个数组,装载两百个分散在canvas各处的粒子对象,并且给每个对象一个随机的运动趋势。也就是xa和ya,用于表示垂直和水平的运动趋势。其实就是一个用于每次循环的时候进行叠加的...

jun_tong
2018/04/12
0
0
一个很酷的加载loading效果

一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view, 本例子主要由以下几点构成 (1):RotateAnimation实现叶子旋转 (2):叶子飘动 (3):当前进度绘制当前...

抉择很难
2015/11/17
0
0
canvas中普通动效与粒子动效的实现

canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。 canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分...

薄荷前端
2018/12/29
0
0
八大疯狂的 HTML5 Canvas 及 WebGL 动画效果

HTML5、WebGL和JavaScript改变了长久以来的动画制作行业。在过去的几年中,我们想要制作卓越的网页动画只能使用Flash和Java Applet。而现在,使用脚本语言和渲染器在浏览器中实现疯狂的动画效...

红薯
2012/03/14
6.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
8
0
多线程同时加载缓存实现

import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import java.util.concurrent.ExecutorServi......

暗中观察
昨天
2
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部