插件描述：canvas实现的粒子效果背景，鼠标引导
html5粒子效果背景在线演示教程
更新时间：2017/6/24 下午3:42:02
更新说明：修改代码，让插件能够在特定div作为背景运行
CanvasParticles
html5 canvas 实现网页背景粒子效果
1.引入js文件
<script type="text/javascript" src="canvas-particle.js"></script>
2.配置
配置，调用CanvasParticle函数，传入配置参数即可，如果不配置则用默认配置
在你的js文件中加上如下配置
window.onload = function(){
//配置
var config = {
vx: 4,//点x轴速度,正为右，负为左
vy: 4,//点y轴速度
height: 2,//点高宽，其实为正方形，所以不宜太大
width: 2,
count: 100,//点个数
color: "121, 162, 185",//点颜色
stroke: "130,255,255",//线条颜色
dist: 6000,//点吸附距离
e_dist: 20000,//鼠标吸附加速距离
max_conn: 10//点到点最大连接数
}
//调用
CanvasParticle(config);
}PREVIOUS:
NEXT:
相关插件-动画效果,背景
3D签到墙 threejs（使用元素周期表修改）
采用threejs官方demo的元素周期更改的，展示为图片，可自动更换或手动更换，目前为旋转状态；模拟推送用户可以优化随机更改图片应该会更好点。
动画效果
讨论这个项目（116）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
薄荷味的笑 1
2018/12/24 16:44:08
如果页面滚动的话，会出现一些视差，办法：
body.onmousemove = function(e){
var event = e || window.event;
canvas.mouse = {
x: event.offsetX,
y: event.offsetY
}
}
回复
鱼 零? 0
2018/12/13 19:06:03
-
怎么把这个高度设置大一点
西瓜0
2018/12/13 21:08:29
设置height:800px
<div id="mydiv" style="height:800px;"></div>
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
