HTML5 canvas圆形泡泡动画配景特效

background.js是一款HTML5 canvas梦幻圆形泡泡动画配景特效。通过background.js插件，你可以轻
松的制作出带渐变效果的气泡动画配景效果，而且配景颜色能在4种颜色间平滑过渡转换。

在线预览 下载
background.js插件的特点还有：

• 支持4种渐变颜色。
  
• 实现梦幻泡泡效果。
  
• 动画平滑过渡效果。
  
• 检测移动设备并尝试优化资源。
  
• 纯JavaScript制作，没有任何依靠。
  

使用方法
在页面中引入background.js文件。

1. <script src="path/to/background.js"></script>

复制代码

HTML结构
使用<canvas>元素来创建配景。

1. <canvas id="background"></canvas>         

复制代码

CSS样式
如果要制作全屏效果，可以使用下面的css代码将元素固定在视口中。

1. #background {
2.   position: fixed;
3.   top: 0;
4.   left: 0;
5.   z-index: -100;
6. }  

复制代码

设置参数

background.js创建可以修改的设置参数如下：

1. var options =
2.   {
3.     resolution: 1,
4.     gradient:
5.     {
6.       resolution: 4,
7.       smallRadius: 0,
8.       hue:
9.       {
10.         min: 0,
11.         max: 360
12.       },
13.       saturation:
14.       {
15.         min: 40,
16.         max: 80
17.       },
18.       lightness:
19.       {
20.         min: 25,
22.         max: 35
23.       }
24.     },
25.     bokeh:
26.     {
27.       count: 30,
28.       size:
29.       {
30.         min: 0.1,
31.         max: 0.3
32.       },
33.       alpha:
34.       {
35.         min: 0.05,
36.         max: 0.4
37.       },
38.       jitter:
39.       {
40.         x: 0.3,
41.         y: 0.3
42.       }
43.     },
44.     speed:
45.     {
46.       min: 0.0001,
48.       max: 0.001
49.     },
50.     debug:
51.     {
52.       strokeBokeh: false,
53.       showFps: false
54.     }
55.   };   

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。