小艾论坛

|设为首页 |收藏本站 |切换到宽版
查看: 203|回复: 0

Canvas实现的粒子效果背景,鼠标引导

[复制链接]

84

主题

148

帖子

1187

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1187
发表于 2018-2-7 15:58:09 | 显示全部楼层 |阅读模式
插件描述:Canvas实现的粒子效果背景,鼠标引导
更新说明:修改代码,让插件能够在特定div作为背景运行

CanvasParticles
html5 canvas 实现网页背景粒子效果
1.引入js文件

1

<script type="text/javascript" src="canvas-particle.js"></script>



2.配置
配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置
在你的js文件中加上如下配置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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);

}





代码演示:点击查看  代码下载:点击下载
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

QQ| Archiver|手机版|小黑屋| 小艾论坛  

Copyright © 2001-2013 Comsenz Inc.   All Rights Reserved. Powered by Discuz! X3.2( 粤ICP备15010006号 )