登录/ 注册
 找回密码
 立即注册
QQ登录
搜索
返回列表 发新帖

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

来自版块: Discuz教程
48050
0
如本资源下载地址失效,请点击此处进行反馈
开通本站Svip会员，全站资源免费下
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>
复制代码

不需要图片，可用作背景或登录页。
1201，论坛，门户，canvas，实现，网页，背景，动画，美化

举报

全部评论 0

期待你的评论哦~
tuyuanma
此人什么也没留下~
关注

教程 / CSS+DIV素材

  • Discuz教程
  • CSS+DIV素材

所属版块

返回版块

您需要登录后才可以回帖 立即登录
登录
0
0
0

©2015-2022 www.tuyuanma.com 版权所有

本站内容皆来自网络分享，如有侵权请联系我们处理。

赣公网安备36112102000036号 赣ICP备17001544号-10

联系邮箱：tuyuanma@qq.com 联系QQ：3197813386

返回顶部