canvas元素粒子随机飘动

canvas元素粒子随机飘动

收藏
canvas元素粒子随机飘动
canvas绘制各种彩色粒子元素,放大缩小随机飘动背景动画。支持鼠标跟随控制。随机生成动画,默认无控制。生成点尺寸设置。生成点的类型。生成点颜色列表,随机刷新颜色等功能。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

1、head引入css文件

<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background-color: #222222
}

body::-webkit-scrollbar {
	display: none;
}
</style>

2、head引入js文件

<script src="js/jquery.min.js" type="text/javascript"></script>

3、body引入HTML代码

<canvas class="canvas"></canvas>

<script src="js/particle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var c = new Cbg({
	container: ".canvas",
	//随机生成动画,默认无控制
	control: "auto",
	//鼠标跟随控制
	//control: "mouse",
	//坐标点定位控制
	//control: "coordinate",
	//设置坐标点,默认屏幕中心,坐标点定位控制时使用
	//x: $(window).width() / 2,
	//y: $(window).height() / 2
	//Canvas宽度高度自定义,默认全屏
	width: $(window).width(),
	height: $(window).height(),
	//生成点尺寸设置
	//size: [初始大小, 尺寸衰减速率(数值越大,尺寸缩减越快,反之越慢,最小不得小于0.01)],
	size: [10, 0.2],
	//生成点的类型,type
	//type:color 生成点为颜色块
	type: "color",
	//生成点颜色列表,随机刷新颜色
	color: ["#6525EE", "#007AFF", "orange", "orangered"],
	//生成点颜色单值,固定颜色刷新
	//color: "red",

	//type:img 生成点为图片,图片比例1:1
	//type: "img",
	//生成点图片列表,随机刷新图片
	//imgUrl: ["图片路径", "图片路径",....],
	//生成点图片单值,固定图片刷新
	//imgUrl: "图片路径",
	//动画类型:
	//animation_type: 0(默认动画,随机方位,随机方向)
	//animation_type: 1(向左运动)
	//animation_type: 2(向右运动)
	//animation_type: 3(向下运动)
	//animation_type: 4(向上运动)
	animation_type: 0,
	//生成点生成速率,数值越大,点的生成越慢
	speed: 10,
})
</script>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。