Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景
更新時(shí)間：2022年08月30日 16:25:59 作者：lucky.麒麟
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)炫酷的代碼瀑布流背景，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue實(shí)現(xiàn)代碼瀑布流背景的具體代碼，供大家參考，具體內(nèi)容如下
先看一下效果：
代碼奉上：
<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,
? ? ? ? ? ? ? ? ? ? // 速度參數(shù) 最小值:4 - 最大值:8
? ? ? ? ? ? ? ? ? ? VELOCITY_PARAMS: {
? ? ? ? ? ? ? ? ? ? ? ? min: 3,
? ? ? ? ? ? ? ? ? ? ? ? max: 8
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? // 代碼長(zhǎng)度參數(shù) ?最小值 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;
? ? ? ? ? ? ? ? ? ? ? ? // 設(shè)置模糊程度
? ? ? ? ? ? ? ? ? ? ? ? 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>
/** 讓這個(gè)背景固定在頁面不隨著滾動(dòng)而滾動(dòng) */
?#canvas {
? ? ?position: fixed;
? ? ?top: 0;
? ? ?left: 0;
?}
</style>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)通知或詳情類彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue2中使用echarts實(shí)現(xiàn)中國(guó)地圖、在中國(guó)地圖上標(biāo)注坐標(biāo)散點(diǎn)圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實(shí)現(xiàn)中國(guó)地圖、在中國(guó)地圖上標(biāo)注坐標(biāo)散點(diǎn)圖,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)
這篇文章主要給大家介紹了關(guān)于Element?UI?Dialog對(duì)話框改成固定高度超出部分滾動(dòng)條滾動(dòng)的相關(guān)資料,el-dialog默認(rèn)高度是自由拉伸的,當(dāng)內(nèi)容超過屏幕時(shí)會(huì)出現(xiàn)滾動(dòng)條,按鈕和標(biāo)題都會(huì)隨著滾動(dòng),用戶體驗(yàn)不好,需要的朋友可以參考下2024-05-05
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue語法和標(biāo)簽使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue3項(xiàng)目中使用ECharts的方法步驟,ECharts可以創(chuàng)建各種類型的圖表,比如折線圖、柱狀圖、餅圖等,配置選項(xiàng)還包括顏色、數(shù)據(jù)縮放、工具箱等,以實(shí)現(xiàn)豐富的圖表效果和交互功能,需要的朋友可以參考下2024-10-10
Vue echarts模擬后端數(shù)據(jù)流程詳解
在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動(dòng)態(tài)的進(jìn)行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法2022-09-09
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染
在Vue中,el-table是element-ui提供的強(qiáng)大表格組件,可以用于展示靜態(tài)和動(dòng)態(tài)表格數(shù)據(jù),本文主要介紹了element-plus+Vue3實(shí)現(xiàn)表格數(shù)據(jù)動(dòng)態(tài)渲染,感興趣的可以了解一下2024-03-03
vue element-ui table表格滾動(dòng)加載方法
下面小編就為大家分享一篇vue element-ui table表格滾動(dòng)加載方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03