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实现炫酷的代码瀑布流背景的详细内容...