html5背景 <br> *{margin:0;padding:0;list-style-type:none;}<br> a,img{border:0;}<br> <br>$(function () {<br> if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {<br> $.getScript( "http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",<br> function () {<br> var t = {<br>幅: 1.5、<br> 高さ: 1.5、<br> 奥行き: 10、<br> セグメント: 12、<br> スライス: 6、<br> xRange: 0.8、<br> yRange: 0.1、<br> zRange: 1、<br> アンビエント: "#525252"、<br>拡散: "#FFFFFF",<br> 速度: 0.0002<br> } ;<br> var G = {<br> count: 2,<br> xyScalar: 1,<br> zオフセット: 100、<br> アンビエント: "#002c4a"、<br> 拡散: "#005584"、<br> 速度: 0.001、<br> 重力: 1200,<br> 減衰: 0.95、<br> 最小制限: 10、<br> 最大制限: null、<br> 最小距離: 20、<br> maxDistance: 400、<br> 自動操縦: false、<br> 描画: false、<br> CAV.Vector3 .create(),<br> ステップ: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))<br> };<br> var m = "キャンバス"; <br> var E = "svg";<br> var x = {<br> レンダラ: m<br> };<br> var i, n = Date.now ();<br> var L = CAV.Vector3.create();<br> var k = CAV.Vector3.create( );<br> var z = document.getElementById("container");<br> var w = document.getElementById("anitOut");<br> var D、I、h、q、 ;<br> var g;<br> var r;<br><br>関数 C() {<br> F();<br> p();<br> s();<br> B();<br> v();<br> K(z.offsetWidth, z.offsetHeight);<br> o()<br> }<br><br> function F() {<br> g = new CAV.CanvasRenderer();<br> H(x.renderer)<br> }<br><br> function H(N) {<br> if (D) {<br> w.removeChild(D.element)<br> } <br>スイッチ(N){<br> case m:<br> D = g;<br> 休憩<br> }<br> } D.setSize(z.offsetWidth, z.offsetHeight);<br> w.appendChild(D.element)<br> }<br><br> 関数 p() {<br> I = 新しい CAV。 Scene()<br> }<br><br> function s() {<br> I.remove(h);<br> D.clear();<br> q = new CAV.Plane(t.width * D.width, t.height * D.height 、t.segments、t.slices);<br> y = 新しい CAV.material(t.ambient, t.diffuse);<br> h = 新しい CAV.Mesh(q, y);<br> I.add(h);<br> var N, O;<br> for (N = q.vertices.length - 1; N >= 0; N--) {<br> O = q.vertices[N];<br> O.anchor = CAV.Vector3.clone(O .position);<br> O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));<br> O.time = 数学。 randomInRange(0, Math.PIM2)<br> }<br> }<br><br> 関数 B() {<br> var O, N;<br> for (O = I.lights.length - 1; O >= 0; O--) {<br> N = I.lights[O];<br> I.remove(N)<br> }<br> D.clear();<br> for (O = 0; O N = 新しい CAV.Light(G.ambient, G.diffuse);<br> N.ambientHex = N.ambient.format();<br> N.diffuseHex = N.diffuse.format();<br> I.add(N);<br> N.mass = Math.randomInRange(0.5, 1);<br> N.速度 = CAV.Vector3.create();<br> N.acceleration = CAV.Vector3.create();<br> N.force = CAV.Vector3.create()<br> }<br> }<br><br> 関数 K(O, N) {<br> D.setSize(O, N);<br> CAV.Vector3.set(L, D.halfWidth, D.halfHeight);<br> s()<br> }<br><br> function o() {<br> i = Date.now() - n ;<br> u();<br> M();<br> requestAnimationFrame(o)<br> }<br><br> function u() {<br> var Q, P, O, R, T, V, U, S = t. Depth / 2;<br> CAV.Vector3.copy(G.bounds, L);<br> CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);<br> CAV.Vector3.setZ(k, G.zOffset);<br> for (R = I.lights.length - 1; R >= 0; R--) {<br> T = I.lights[R];<br> CAV。 Vector3.setZ(T.position, G.zOffset);<br> var N = Math.clamp(CAV.Vector3. distanceSquared(T.position, k), G.minDistance, G.maxDistance);<br> var W = G.重力* T.mass / N;<br> CAV.Vector3.subtractVectors(T.force, k, T.position);<br> CAV.Vector3.normalise(T.force);<br> CAV.Vector3.multiplyScalar(T.force, W) ;<br> CAV.Vector3.set(T.acceleration);<br> CAV.Vector3.add(T.acceleration, T.force);<br> CAV.Vector3.add(T.velocity, T.acceleration);<br> CAV.Vector3。 multiplyScalar(T.velocity, G.dampening);<br> CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);<br> CAV.Vector3.add(T.position 、T.velocity)<br> }<br> の(V = q垂直長 - 1; V >= 0; V--) {<br> U = q.vertices[V];<br> Q = Math.sin(U.time + U.step[0] * i * t.speed);<br> P = Math.cos(U.time + U.step[1] * i * t.speed);<br> O = Math.sin(U.time + U.step[2] * i * t.speed);<br> CAV.Vector3.set(U.position , t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);<br> CAV.Vector3.add(U.position, U.anchor)<br> }<br> q.dirty = true<br> }<br><br> function M() {<br> D.render(I)<br> } <br><br> function J(O) {<br> var Q, N, S = O;<br> var P = function (T) { <br> for (Q = 0, l = I.lights.length; Q N = I.lights[Q];<br> N.ambient.set(T);<br> N.ambientHex = N. ambient.format()<br> }<br> };<br> var R = 関数 (T) {<br> for (Q = 0, l = I.lights.length; Q N = I.lights[Q ];<br> N.diffuse.set(T);<br> N.diffuseHex = N.diffuse.format()<br> }<br> };<br> return {<br> set: function () {<br> P(S[0]);<br> R (S[1])<br> }<br> }<br> }<br><br> 関数 v( ){<br> window.addEventListener("resize", j)<br> }<br><br> function A(N) {<br> CAV.Vector3.set(k, N.x, D.height - N.y) ;<br> CAV.Vector3.subtract(k, L)<br> }<br><br> function j(N) {<br> K(z.offsetWidth, z.offsetHeight);<br> M()<br> }<br><br> C();<br> })<br> } else {<br> alert('调用cav.js失败' );<br> }<br>});<br>
