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
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? // 代碼長度參數(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>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，比如說我們?cè)趗rl地址中輸入我們要訪問的url地址之后，瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源，本文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這些年寫前端vue時(shí)經(jīng)常碰到虛擬DOM這個(gè)單詞，但都是聽到就算了，左耳進(jìn)右耳出，知道有這么個(gè)東西就完了，因?yàn)楦杏X也沒有影響我實(shí)現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點(diǎn)時(shí)間探討下虛擬DOM相關(guān)的知識(shí)，給自己補(bǔ)補(bǔ)課2022-10-10
在開發(fā)過程中,有時(shí)候會(huì)遇到這么一種情況,通過動(dòng)態(tài)的賦值,但是dom沒有及時(shí)更新,能夠獲取到動(dòng)態(tài)賦的值,但是無法獲取到雙向綁定的dom節(jié)點(diǎn),這就需要我們手動(dòng)進(jìn)行強(qiáng)制刷新組件,下面這篇文章主要給大家介紹了關(guān)于vue組件強(qiáng)制刷新的4種方案,需要的朋友可以參考下2023-05-05
Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new?Vue()?開始就是vue生命周期的開始。Vue?實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom?->?渲染、更新?->?渲染、卸載?等?系列過程,稱這是Vue的?命周期2022-07-07
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了詳解Vue項(xiàng)目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁評(píng)論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動(dòng)畫，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)2021-05-05
這篇文章主要介紹了詳解Axios統(tǒng)一錯(cuò)誤處理與后置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue2 Watch監(jiān)聽,通過watch監(jiān)聽器,我們可以實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)的變化,并且在數(shù)據(jù)發(fā)生改變時(shí)進(jìn)行相應(yīng)的操作,需要的朋友可以參考下2023-12-12
vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09