兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册
PS教程

【实测】DZ论坛或门户利用canvas实现网页背景动画美化,圈圈点点

[复制链接]
tuyuanma 发表于 2018-11-12 14:12:59 来自手机 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


204541o1gztrlhtn1lr2rt.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>
复制代码

不需要图片,可用作背景或登录页。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2018-12-12 04:29
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表