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