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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

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

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

DZ站长建站交流群:493651246

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


204541o1gztrlhtn1lr2rt.gif / W! H& |; I( V) S
html+ Y& ~1 A1 [& Q/ A. N
  1. <canvas id="c"></canvas>
复制代码
9 @. x/ x: k; w" @
js
  1. <script type="text/javascript">               
    + o: U. p0 D8 ^
  2. $(document).ready(function() {                        ( ]" s; L! ?! s8 K
  3.         var canvas = document.getElementById("c");
    5 C% v) Q# B' S$ \3 g% u0 O
  4.         var ctx = canvas.getContext("2d");7 R% Y. Z; p$ T' K- J& n7 R& o
  5.         var c = $("#c");
    ( L, m. V! g! y* I1 r" Q
  6.         var w,h;1 r3 n5 z9 v1 n/ o
  7.         var pi = Math.PI;
    . L$ B. y! n: o: k" k
  8.         var all_attribute = {
    ( X4 s0 J8 Y# A
  9.                 num:100,                                     // 个数5 X* ?" W) F: Y3 K" p' R7 X1 ^
  10.                 start_probability:0.1,                     // 如果数量小于num,有这些几率添加一个新的                          
    ) T1 t8 [+ }+ b: U) h% }% c& `
  11.                 radius_min:1,                                // 初始半径最小值
    ; r% S% R/ `/ a' @0 }$ [* h
  12.                 radius_max:2,                                // 初始半径最大值& ?: D. y7 Q$ c$ f* W* Y
  13.                 radius_add_min:.3,               // 半径增加最小值
    2 p' u3 o. e- w4 [
  14.                 radius_add_max:.5,               // 半径增加最大值
    , q  b! i3 w! K3 K7 O% u0 @5 V
  15.                 opacity_min:0.3,                 // 初始透明度最小值
    ) V: C- ~, f- E
  16.                 opacity_max:0.5,                                  // 初始透明度最大值& u% A/ n( v( d& k# w- s
  17.                 opacity_prev_min:.003,            // 透明度递减值最小值
    9 G. c6 [7 G. k6 |( E
  18.                 opacity_prev_max:.005,            // 透明度递减值最大值$ D+ w9 Y/ G6 c( w0 P5 \; f
  19.                 light_min:40,                 // 颜色亮度最小值
    ( a9 t& y7 g4 A3 |
  20.                 light_max:70,                 // 颜色亮度最大值
    " T7 M9 |9 |3 T" `
  21.         };
    ( H7 X5 g+ ^$ B- R
  22.         var style_color = find_random(0,360);  
    " S/ X8 g( }! d& y
  23.         var all_element =[];
      D; r* ]$ ~' y3 J
  24.         window_resize();, G- v3 O; G7 I
  25.         function start(){
    % @2 |  ?6 J2 h! L: T6 J
  26.                 window.requestAnimationFrame(start);. H1 x( m3 p, n- C) }/ g
  27.                 style_color+=.1;
    + ]2 X# g0 v9 h0 Q8 L5 C% z8 s
  28.                 ctx.fillStyle = 'hsl('+style_color+',100%,97%)';
    , D# X" ?4 t# K$ @
  29.                 ctx.fillRect(0, 0, w, h);
    & @5 ^3 l7 J  }" q$ s9 ^  ^
  30.                 if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){
    / y2 K/ X, ]% t% B( Y3 d
  31.                         all_element.push(new ready_run);
    % I0 j( U: g0 a( w0 G" [/ Z; I3 W
  32.                 }8 ]* l& n5 ~6 N3 S$ d7 H3 \
  33.                 all_element.map(function(line) {) a! A, ?) j$ u* [. I) @# g
  34.                         line.to_step();2 z+ e' e" g& b0 m& D
  35.                 }); }, l3 i8 k8 T3 U) M- C
  36.         }
    " g+ i" R# J( Q) [
  37.         function ready_run(){
    ) u6 U) A! u1 u# y: S* S
  38.                 this.to_reset();- _# d, G5 S; J6 z. H+ M7 U# I
  39.         }+ E* H9 F. f5 h0 h4 {5 `7 U
  40.         ready_run.prototype = {
    0 S# d, g) i  P" {7 |
  41.                 to_reset:function(){
    4 K5 X. {- V6 j
  42.                         var t = this;
    ( C# ]& B! h5 O. \
  43.                         t.x = find_random(0,w);
      Y! B. i+ }1 j7 g7 m
  44.                         t.y = find_random(0,h);0 z7 h$ V8 k7 {' ?* m6 v0 m8 n
  45.                         t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);# a0 Q" k: z7 Y/ w& ]) Q
  46.                         t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);$ U+ V# y, `! P+ i
  47.                         t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);. ~, p7 o1 `$ @7 U  J
  48.                         t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);% x/ P" O' V7 C; X$ b! ]
  49.                         t.light = find_random(all_attribute.light_min,all_attribute.light_max);
    ! `* l4 G8 w/ I1 o
  50.                         t.color = 'hsl('+style_color+',100%,'+t.light+'%)';& a$ s( Q% K# y  q( i( i$ Q
  51.                 },: a. G- n) X8 a' n
  52.                 to_step:function(){
    9 m+ T) W$ V4 V
  53.                         var t = this;
    ( X8 E8 i; s* c# A/ V
  54.                         t.opacity -= t.opacity_change;
    5 N, ?1 S& u: \) a8 i) p
  55.                         t.radius += t.radius_change;6 |% ]$ K5 h# Z6 i  O5 t2 e
  56.                         if(t.opacity <= 0){. p( j; _  b7 V2 Q
  57.                                 t.to_reset();
    ( m' O5 K+ R$ }1 q- u5 }) y. S9 U
  58.                                 return false;4 T6 l  {8 n8 r6 M( B. v4 U% U0 a
  59.                         }: V& G, @4 ~" N3 h* T
  60.                         ctx.fillStyle = t.color;
    * X: X* N! h5 E$ m" |1 A
  61.                         ctx.globalAlpha = t.opacity;- d" E: A/ q7 h( A; P
  62.                         ctx.beginPath();/ T, Z9 p+ i  `6 N7 Z9 S
  63.                         ctx.arc(t.x,t.y,t.radius,0,2*pi,true);
    8 }5 D! C' {& w; k: ]" l
  64.                         ctx.closePath();
    . s' p* V7 k; z" m  ]+ D  F4 \
  65.                         ctx.fill();0 f: v, i0 {4 Y' H
  66.                         ctx.globalAlpha = 1;- ?2 S" \# {5 w& t
  67.                 }6 d7 R. K! j5 n
  68.         }. B* V/ U; ]! i
  69.         function window_resize(){
    ; V+ t& S9 h+ Z9 \# _4 ]1 T1 v5 O
  70.                 w = window.innerWidth;) p4 l! r- X" q) A3 P1 L  @
  71.                 h = window.innerHeight;
      s; q& ?5 H" X# `
  72.                 canvas.width = w;3 a- x1 v. M' i! \- b. R6 y7 l3 D5 r/ X6 n
  73.                 canvas.height = h;* l, D3 }* f! h& q! g6 @9 k$ |3 J
  74.         }
    ; T/ D$ P' {: \! c1 S" u0 Y0 l
  75.         $(window).resize(function(){
    7 r8 h: b+ v. x" G
  76.                 window_resize();4 ^9 m6 S5 Q' U6 P# V+ P
  77.         });
    - b  h  M+ ~" |7 r7 `, t
  78.         function find_random(num_one,num_two){
    $ x2 |$ w$ J9 B! o2 n$ j* ]
  79.                 return Math.random()*(num_two-num_one)+num_one;
    % {: t# m# k) D# O
  80.         }8 D2 I+ y  a# ?
  81.         (function() {; M5 R: R/ f' u0 l+ h" u6 z& e8 j
  82.                 var lastTime = 0;
    4 }* P. L7 Q' O# F( ?% `1 n
  83.                 var vendors = ['webkit', 'moz'];
    2 s3 ~5 k/ _( ^) `1 j
  84.                 for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {: t& t/ ]) S8 Y# x, j: @5 ~
  85.                         window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];  Q3 r/ c% X! O9 o7 E5 F" u
  86.                         window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||5 y. |" E# K) ~% N$ l- }$ q
  87.                                                                                   window[vendors[xx] + 'CancelRequestAnimationFrame'];
    8 |7 O: {$ ^' H  Q2 ~4 ]5 D& Y
  88.                 }
    ; T) S# j6 f* f. a+ w3 y  N  p/ h/ |
  89.         
    ' W) ?2 z) ~: ~& G7 O% A) j; U
  90.                 if (!window.requestAnimationFrame) {
    ) g, W1 u" w  B( P. V0 M
  91.                         window.requestAnimationFrame = function(callback, element) {* I- {2 J0 p( q; n' z0 C5 h
  92.                                 var currTime = new Date().getTime();
    / P, }& ^/ W. n% }) L
  93.                                 var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));- ~" P5 v: u5 @) n! @5 t4 f) Q" r
  94.                                 var id = window.setTimeout(function() {
    ( R# w8 o: K; J- o( t9 V/ s
  95.                                         callback(currTime + timeToCall);' Q, q- a) f/ E, \! A" h
  96.                                 }, timeToCall);( W0 i3 ?6 r! M7 B5 T; B: r& b8 o8 P
  97.                                 lastTime = currTime + timeToCall;
    , D! S1 l* Y  V: H3 _8 _0 p
  98.                                 return id;+ q/ x) ^7 R. i" G% j. v
  99.                         };1 |  ]4 S6 K2 p1 ~. j; ?- G2 }5 l
  100.                 }
    ' ^. \5 b, v) K4 Q  ~7 E3 ]
  101.                 if (!window.cancelAnimationFrame) {! U7 a$ `& s7 q% e, v- U$ A- }
  102.                         window.cancelAnimationFrame = function(id) {
    1 C9 Y# W' r7 ?) g# T% h7 [
  103.                                 clearTimeout(id);$ d% j2 p2 z* {- x' F8 j+ _* P
  104.                         };, j7 ^+ M7 X" z6 q7 A9 R
  105.                 }' z9 S3 `) _5 Q) ~) h' j" @1 n
  106.         }());
    , Z4 Z, j1 x6 n1 N2 `, |
  107.         start();
    . M7 H; _4 m, [2 M2 @
  108. });
    1 l6 {9 g. \) z8 O8 |# L4 b- ?
  109. </script>
复制代码
! y9 r" X0 E# Z7 }, Z  k3 D2 F# c
不需要图片,可用作背景或登录页。

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




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

本版积分规则

广告

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

兔源码 QQ交流群:493651246  GMT+8, 2019-12-9 10:38
←站长统计工具 查看密码:tuyuanma

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

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

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