canvas 网页背景动画 圈圈圈圈点点点点

浏览
356
回复
2
收藏
1
点赞
1

1#

2018-11-7 20:48:55

as.gif


html
  1. <canvas id="c"></canvas>
复制代码
js
  1. <script type="text/javascript">               
  2. $(document).ready(function() {                       
  3.         var canvas = document.getElementById("c");
  4.         var ctx = canvas.getContext("2d");
  5.         var c = $("#c");
  6.         var w,h;
  7.         var pi = Math.PI;
  8.         var all_attribute = {
  9.                 num:100,                                     // 个数
  10.                 start_probability:0.1,                     // 如果数量小于num,有这些几率添加一个新的                          
  11.                 radius_min:1,                                // 初始半径最小值
  12.                 radius_max:2,                                // 初始半径最大值
  13.                 radius_add_min:.3,               // 半径增加最小值
  14.                 radius_add_max:.5,               // 半径增加最大值
  15.                 opacity_min:0.3,                 // 初始透明度最小值
  16.                 opacity_max:0.5,                                  // 初始透明度最大值
  17.                 opacity_prev_min:.003,            // 透明度递减值最小值
  18.                 opacity_prev_max:.005,            // 透明度递减值最大值
  19.                 light_min:40,                 // 颜色亮度最小值
  20.                 light_max:70,                 // 颜色亮度最大值
  21.         };
  22.         var style_color = find_random(0,360);  
  23.         var all_element =[];
  24.         window_resize();
  25.         function start(){
  26.                 window.requestAnimationFrame(start);
  27.                 style_color+=.1;
  28.                 ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
  29.                 ctx.fillRect(0, 0, w, h);
  30.                 if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){
  31.                         all_element.push(new ready_run);
  32.                 }
  33.                 all_element.map(function(line) {
  34.                         line.to_step();
  35.                 })
  36.         }
  37.         function ready_run(){
  38.                 this.to_reset();
  39.         }
  40.         ready_run.prototype = {
  41.                 to_reset:function(){
  42.                         var t = this;
  43.                         t.x = find_random(0,w);
  44.                         t.y = find_random(0,h);
  45.                         t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);
  46.                         t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);
  47.                         t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);
  48.                         t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);
  49.                         t.light = find_random(all_attribute.light_min,all_attribute.light_max);
  50.                         t.color = 'hsl('+style_color+',100%,'+t.light+'%)';
  51.                 },
  52.                 to_step:function(){
  53.                         var t = this;
  54.                         t.opacity -= t.opacity_change;
  55.                         t.radius += t.radius_change;
  56.                         if(t.opacity <= 0){
  57.                                 t.to_reset();
  58.                                 return false;
  59.                         }
  60.                         ctx.fillStyle = t.color;
  61.                         ctx.globalAlpha = t.opacity;
  62.                         ctx.beginPath();
  63.                         ctx.arc(t.x,t.y,t.radius,0,2*pi,true);
  64.                         ctx.closePath();
  65.                         ctx.fill();
  66.                         ctx.globalAlpha = 1;
  67.                 }
  68.         }
  69.         function window_resize(){
  70.                 w = window.innerWidth;
  71.                 h = window.innerHeight;
  72.                 canvas.width = w;
  73.                 canvas.height = h;
  74.         }
  75.         $(window).resize(function(){
  76.                 window_resize();
  77.         });
  78.         function find_random(num_one,num_two){
  79.                 return Math.random()*(num_two-num_one)+num_one;
  80.         }
  81.         (function() {
  82.                 var lastTime = 0;
  83.                 var vendors = ['webkit', 'moz'];
  84.                 for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {
  85.                         window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];
  86.                         window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||
  87.                                                                                   window[vendors[xx] + 'CancelRequestAnimationFrame'];
  88.                 }
  89.        
  90.                 if (!window.requestAnimationFrame) {
  91.                         window.requestAnimationFrame = function(callback, element) {
  92.                                 var currTime = new Date().getTime();
  93.                                 var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
  94.                                 var id = window.setTimeout(function() {
  95.                                         callback(currTime + timeToCall);
  96.                                 }, timeToCall);
  97.                                 lastTime = currTime + timeToCall;
  98.                                 return id;
  99.                         };
  100.                 }
  101.                 if (!window.cancelAnimationFrame) {
  102.                         window.cancelAnimationFrame = function(id) {
  103.                                 clearTimeout(id);
  104.                         };
  105.                 }
  106.         }());
  107.         start();
  108. });
  109. </script>
复制代码
不需要图片。

我用来做登录页面背景,#c加了定位。


Screenshot 2018-11-08 at 07.19.50.png

我之前都寫了個星空 純用 css + js 來實現沒圖也能顯示
用在預設沒版區背景圖的版塊呢~
不過之後被我玩壞了~哪裡都把它當成預設用
SIGNATURE
歡迎交流,但因為有時差,回覆信息會比較慢哦
dreamrx 发表于 2018-11-8 15:21
我之前都寫了個星空 純用 css + js 來實現沒圖也能顯示
用在預設沒版區背景圖的版塊呢~
不過之後被我玩 ...

其实用的时候也要有选择性,尽量简单点的。
我试过一些,因为电脑显卡不行,打开就卡住。

点评

嗯 其實是有選擇性用 只是玩玩而已 就被玩壞了的感覺了  发表于 2018-11-9 11:07

回复主题

已有 2 条回复
您需要登录后才可以回帖 登录 | 注册
高级模式

关于楼主
管理员
帖子
1427
日志
41
精华
19
精华推荐