插件描述：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:
相关插件-动画效果,背景
canvas 雨滴
这款动画主要是模拟了下雨的场景，雨滴从空中飘落，落在地上溅起水花，整个过程模拟得相当逼真。更重要的是，这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度，鼠标左右滑动控制雨滴方向，鼠标上下滑动控制雨滴密度。
动画效果
讨论这个项目（115）回答他人问题或分享插件使用方法奖励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>
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
