この特殊効果を表示するには、HTML5 をサポートするブラウザを使用してください コードをコピーしますコードは次のとおりです: HTML5 あり特色の詳細条<br>body {<br>背景: #111;<br>色:白; <br>}<br>a{color:White;}<br>キャンバス {<br>背景: #111;<br>境界線: 1px ソリッド #171717;<br>表示: ブロック;<br>左: 50 %;<br>マージン: -51px 0 0 -201px;<br>位置: 絶対;<br>トップ: 50%;<br>}<br><br>/*======================== ======================*/<br>/* ライトローダー<br>/*============== ====================================*/<br>var lightLoader = function (c, cw, ch) {<br>var _this = this;<br>this.c = c;<br>this.ctx = c.getContext('2d');<br>this.cw = cw;<br>this。 ch = ch;<br>this.loaded = 0;<br>this.loaderSpeed = .6;<br>this.loaderHeight = 10;<br>this.loaderWidth = 310;<br>this.loader = {<br>x: (this.cw / 2) - (this.loaderWidth / 2),<br>y: (this.ch / 2) - (this.loaderHeight / 2)<br>};<br>this。パーティクル = [];<br>this.particleLift = 180;<br>this.hueStart = 0<br>this.hueEnd = 120;<br>this.hue = 0;<br>this.gravity = .15; <br>this.particleRate = 4;<br>/*==================================== ====================*/<br>/* 初期化<br>/*================= =======================================*/<br>this.init = function ( ) {<br>this.loop();<br>};<br>/*============================= ===========================*/<br>/* ユーティリティ関数<br>/*========= ===============================================*/<br>this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi 1)) rMi); };<br>this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 w1 /*========================================== =============*/<br>/* ローダー更新<br>/*======================= =================================*/<br>this.updateLoader = function () {<br>if (this.loaded this.loaded = this.loaderSpeed;<br>} else {<br>this.loaded = 0;<br>}<br>};<br>/*= ================================================= =====*/<br>/* レンダーローダー<br>/*=============================== =========================*/<br>this.renderLoader = function () {<br>this.ctx.fillStyle = '#000 ';<br>this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);<br>this.hue = this.hueStart (this.loaded / 100) * (this.hueEnd - this.hueStart);<br>var newWidth = (this.loaded / 100) * this.loaderWidth;<br>this.ctx.fillStyle = 'hsla(' this.hue ', 100%, 40 %, 1)';<br>this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);<br>this.ctx.fillStyle = '#222';<br>this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);<br>};<br>/*============ ============================================*/<br>/ * パーティクル<br>/*=========================================== =============*/<br>this.Particle = function () {<br>this.x = _this.loader.x ((_this.loaded / 100) * _this.loaderWidth ) - _this.rand(0, 1);<br>this.y = _this.ch / 2 _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;<br>this.vx = (_this. rand(0, 4) - 2) / 100;<br>this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;<br>this.width = _this.rand (1, 4) / 2;<br>this.height = _this.rand(1, 4) / 2;<br>this.hue = _this.hue;<br>};<br>this.Particle.prototype .update = function (i) {<br>this.vx = (_this.rand(0, 6) - 3) / 100;<br>this.vy = _this.gravity;<br>this.x = this. vx;<br>this.y = this.vy;<br>if (this.y > _this.ch) {<br>_this.particles.splice(i, 1);<br>}<br>};<br>this.Particle.prototype.render = function () {<br>_this.ctx. fillStyle = 'hsla(' this.hue ', 100%, ' _this.rand(50, 70) '%, ' _this.rand(20, 100) / 100 ')';<br>_this.ctx.fillRect( this.x, this.y, this.width, this.height);<br>};<br>this.createParticles = function () {<br>var i = this.particleRate;<br>while (i- -) {<br>this.particles.push(new this.Particle());<br>};<br>};<br>this.updateParticles = function () {<br>var i = this.particles .length;<br>while (i--) {<br>var p = this.particles[i];<br>p.update(i);<br>};<br>};<br>this .renderParticles = function () {<br>var i = this.particles.length;<br>while (i--) {<br>var p = this.particles[i];<br>p.render() ;<br>};<br>};</p> <p>/*============================================ ============*/<br />/* クリアキャンバス<br />/*======================== ================================*/<br />this.clearCanvas = function () {<br />this. ctx.globalCompositeOperation = 'ソースオーバー';<br />this.ctx.clearRect(0, 0, this.cw, this.ch);<br />this.ctx.globalCompositeOperation = 'lighter';<br />};<br />/*======== ===============================================*/ <br />/* アニメーションループ <br />/*====================================== ==================*/<br />this.loop = function () {<br />var loopIt = function () {<br />requestAnimationFrame(loopIt, _this. c);<br />_this.clearCanvas();<br />_this.createParticles();<br />_this.updateLoader();<br />_this.updateParticles();<br />_this.renderLoader();<br />_this.renderParticles();<br />};<br />loopIt();<br />};<br />};<br />/*================ ========================================*/<br />/* キャンバスのサポートを確認する<br />/*=========================================== ===========*/<br />var isCanvasSupported = function () {<br />var elem = document.createElement('canvas');<br />return !!(elem.getContext && elem .getContext('2d'));<br />};<br />/*=============================== =========================*/<br />/* requestAnimationFrame<br />の設定/*=========== =============================================*/<br /> var setupRAF = function () {<br />var lastTime = 0;<br />varベンダー = ['ms', 'moz', 'webkit', 'o'];<br />for (var x = 0; ×＜ベンダー.length && !window.requestAnimationFrame; x) {<br />window.requestAnimationFrame = window[vendors[x] 'RequestAnimationFrame'];<br />window.cancelAnimationFrame = window[vendors[x] 'CancelAnimationFrame'] || window[vendors[x] 'CancelRequestAnimationFrame'];<br />};<br />if (!window.requestAnimationFrame) {<br />window.requestAnimationFrame = function (callback, element) {<br />var currTime = new Date( ).getTime();<br />var timeToCall = Math.max(0, 16 - (currTime - lastTime));<br />var id = window.setTimeout(function () { callback(currTime timeToCall); }, timeToCall );<br />lastTime = currTime timeToCall;<br />return id;<br />};<br />};<br />if (!window.cancelAnimationFrame) {<br />window.cancelAnimationFrame = function (id) {<br />clearTimeout(id);<br />};<br />};<br />};<br />/*====================== =================================*/<br />/* Canvas を定義して初期化<br />/*= ================================================= =====*/<br />if (isCanvasSupported) {<br />var c = document.createElement('canvas');<br />c.width = 400;<br />c.height = 100;<br />var cw = c.width;<br />var ch = c.height;<br />document.body.appendChild(c);<br />var cl = new lightLoader(c, cw, ch);<br />setupRAF ();<br />cl.init();<br />}<br />HTML5进度条请使用サポートHTML5の浏览器查看本页< /div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
