Vue實現炫酷的代碼瀑佈流背景
本文實例為大傢分享瞭Vue實現代碼瀑佈流背景的具體代碼,供大傢參考,具體內容如下
先看一下效果:
代碼奉上:
<template> <canvas id="canvas" /> </template> <script> export default { name: "BackCanvas", props: { height: { type: Number, default: 500 } }, data() { return { settings: { COL_WIDTH: 15, COL_HEIGHT: 15, // 速度參數 最小值:4 - 最大值:8 VELOCITY_PARAMS: { min: 3, max: 8 }, // 代碼長度參數 最小值 20 - 最大值 40 CODE_LENGTH_PARAMS: { min: 20, max: 40 } }, animation: null, c: null, ctx: null, lineC: null, ctx2: null, WIDTH: window.innerWidth, HEIGHT: window.innerHeight, COLUMNS: null, canvii: [], // font from here https://www.dafont.com/matrix-code-nfi.font font: '24px matrix-code', letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'this', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'], codes: [], createCodeLoop: null, codesCounter: 0 } }, mounted() { this.init(); }, methods: { init () { this.c = document.getElementById( 'canvas' ); this.ctx = this.c.getContext( '2d' ); this.c.width = this.WIDTH; this.c.height = this.HEIGHT; this.ctx.shadowBlur = 0; this.ctx.fillStyle = '#000'; this.ctx.fillRect(0, 0, this.WIDTH, this.HEIGHT); this.ctx.font = this.font; this.COLUMNS = Math.ceil(this.WIDTH / this.settings.COL_WIDTH); for (let i = 0; i < this.COLUMNS; i++) { this.codes[i] = []; this.codes[i][0] = { 'open': true, 'position': {'x': 0, 'y': 0}, 'strength': 0 }; } this.loop(); this.createLines(); this.createCode(); window.onresize = function () { window.cancelAnimationFrame(this.animation); this.animation = null; this.ctx.clearRect(0, 0, this.WIDTH, this.HEIGHT); this.codesCounter = 0; this.ctx2.clearRect(0, 0, this.WIDTH, this.HEIGHT); this.WIDTH = window.innerWidth; this.HEIGHT = window.innerHeight; this.init(); }; }, loop () { this.animation = requestAnimationFrame( () => { this.loop(); } ); this.draw(); }, draw () { let velocity, height, x, y, c, ctx; // slow fade BG colour this.ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; this.ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'; this.ctx.fillRect(0, 0, this.WIDTH, this.HEIGHT); this.ctx.globalCompositeOperation = 'source-over'; for (let i = 0; i < this.COLUMNS; i++) { if (this.codes[i][0].canvas) { velocity = this.codes[i][0].velocity; height = this.codes[i][0].canvas.height; x = this.codes[i][0].position.x; y = this.codes[i][0].position.y - height; c = this.codes[i][0].canvas; ctx = c.getContext('2d'); this.ctx.drawImage(c, x, y, this.settings.COL_WIDTH, height); if ((this.codes[i][0].position.y - height) < this.HEIGHT){ this.codes[i][0].position.y += velocity; } else { this.codes[i][0].position.y = 0; } } } }, createCode () { if (this.codesCounter > this.COLUMNS) { clearTimeout(this.createCodeLoop); return; } let randomInterval = this.randomFromInterval(0, 100); let column = this.assignColumn(); if (column) { let codeLength = this.randomFromInterval(this.settings.CODE_LENGTH_PARAMS.min, this.settings.CODE_LENGTH_PARAMS.max); let codeVelocity = (Math.random() * (this.settings.VELOCITY_PARAMS.max - this.settings.VELOCITY_PARAMS.min)) + this.settings.VELOCITY_PARAMS.min; let lettersLength = this.letters.length; this.codes[column][0].position = {'x': (column * this.settings.COL_WIDTH), 'y': 0}; this.codes[column][0].velocity = codeVelocity; this.codes[column][0].strength = this.codes[column][0].velocity / this.settings.VELOCITY_PARAMS.max; for (let i = 1; i <= codeLength; i++) { let newLetter = this.randomFromInterval(0, (lettersLength - 1)); this.codes[column][i] = this.letters[newLetter]; } this.createCanvii(column); this.codesCounter++; } this.createCodeLoop = setTimeout(this.createCode, randomInterval); }, createCanvii (i) { let codeLen = this.codes[i].length - 1; let canvHeight = codeLen * this.settings.COL_HEIGHT; let velocity = this.codes[i][0].velocity; let strength = this.codes[i][0].strength; let text, fadeStrength; let newCanv = document.createElement('canvas'); let newCtx = newCanv.getContext('2d'); newCanv.width = this.settings.COL_WIDTH; newCanv.height = canvHeight; for (let j = 1; j < codeLen; j++) { text = this.codes[i][j]; newCtx.globalCompositeOperation = 'source-over'; newCtx.font = '24px matrix-code'; if (j < 5) { newCtx.shadowColor = 'hsl(104, 79%, 74%)'; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; // 設置模糊程度 newCtx.shadowBlur = 6; newCtx.fillStyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')'; } else if (j > (codeLen - 4)) { fadeStrength = j / codeLen; fadeStrength = 1 - fadeStrength; newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + (fadeStrength + 0.3) + ')'; } else { newCtx.shadowOffsetX = 0; newCtx.shadowOffsetY = 0; newCtx.shadowBlur = 0; newCtx.fillStyle = 'hsla(104, 79%, 74%, ' + strength + ')'; } newCtx.fillText(text, 0, (canvHeight - (j * this.settings.COL_HEIGHT))); } this.codes[i][0].canvas = newCanv; }, createLines () { this.linesC = document.createElement('canvas'); this.linesC.width = this.WIDTH; this.linesC.height = this.HEIGHT; this.linesC.style.position = 'fixed'; this.linesC.style.top = 0; this.linesC.style.left = 0; this.linesC.style.zIndex = 10; document.body.appendChild(this.linesC); let linesYBlack = 0; let linesYWhite = 0; this.ctx2 = this.linesC.getContext('2d'); this.ctx2.beginPath(); this.ctx2.lineWidth = 1; this.ctx2.strokeStyle = 'rgba(0, 0, 0, 0.7)'; while (linesYBlack < this.HEIGHT) { this.ctx2.moveTo(0, linesYBlack); this.ctx2.lineTo(this.WIDTH, linesYBlack); linesYBlack += 5; } this.ctx2.lineWidth = 0.15; this.ctx2.strokeStyle = 'rgba(255, 255, 255, 0)'; while (linesYWhite < this.HEIGHT) { this.ctx2.moveTo(0, linesYWhite+1); this.ctx2.lineTo(this.WIDTH, linesYWhite+1); linesYWhite += 5; } this.ctx2.stroke(); }, assignColumn () { let randomColumn = this.randomFromInterval(0, (this.COLUMNS - 1)); if (this.codes[randomColumn][0].open) { this.codes[randomColumn][0].open = false; } else { return false; } return randomColumn; }, randomFromInterval (from, to) { return Math.floor(Math.random() * (to - from+ 1 ) + from); } } } </script> <style scoped> /** 讓這個背景固定在頁面不隨著滾動而滾動 */ #canvas { position: fixed; top: 0; left: 0; } </style>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 使用canvas制作炫酷黑客帝國數字雨背景html+css+js
- HTML很火的浪漫愛心表白代碼
- js+canvas實現代碼雨效果
- 簡單JS打造酷炫代碼雨(黑客高逼格)
- JavaScript canvas實現刮刮樂案例