从零开始使用 Vue 3 和 Canvas 实现哔哩哔哩首页 banner

2023-11-21 19:25:21

前言

前段时间，我在闲暇之余无意间发现哔哩哔哩弹幕网的首页 banner 换了，而且人物的眼睛还会一眨一眨的，鼠标移上去会有景深和位移的变化。这引起了我的好奇心，于是按 F12 观察了一波，发现这个效果是通过几张图片配合 CSS 实现的。

刚好最近 Vue 3.0 发布了，想搞个小项目练练手，就把这个项目提上了日程。本篇文章将详细介绍如何使用 Vue 3 和 Canvas 实现哔哩哔哩首页 banner。从获取原始图片到使用 Canvas 渲染，再到使用 CSS 实现位移和景深效果，本文将手把手教你一步步完成这个项目的制作。无论是作为前端开发人员还是对动画感兴趣的人，这篇文章都将为你提供有价值的信息和实操指南。

一、准备工作

在开始之前，我们需要先准备一些必要的工具和材料：

Node.js（用于安装和运行 Vue 3）
Vue 3 CLI（用于快速搭建 Vue 项目）
几张原始图片（可从哔哩哔哩首页 banner 获取）
代码编辑器（如 Visual Studio Code）

二、搭建 Vue 项目

安装 Node.js

确保你的电脑已经安装了 Node.js。如果没有，请前往 Node.js 官网下载并安装。

安装 Vue 3 CLI

在命令行中运行以下命令安装 Vue 3 CLI：

npm install -g @vue/cli

创建 Vue 项目

在命令行中运行以下命令创建一个新的 Vue 项目：

vue create vue-bilibili-banner

进入刚创建的项目目录：

cd vue-bilibili-banner

三、获取原始图片

我们需要从哔哩哔哩首页 banner 获取原始图片。为此，我们可以使用 Chrome 浏览器的开发人员工具。

打开哔哩哔哩首页

在 Chrome 浏览器中打开哔哩哔哩首页。

按 F12 打开开发人员工具

在 Chrome 浏览器中，按 F12 打开开发人员工具。

找到 banner 图片的 URL

在开发人员工具的 Network 面板中，找到 banner 图片的 URL。

下载原始图片

右键单击 banner 图片的 URL，选择 "Copy link address"。然后，在命令行中运行以下命令下载原始图片：

wget https://example.com/banner.png

四、使用 Canvas 渲染图片

现在，我们已经获得了原始图片，接下来我们需要使用 Canvas 将它们渲染出来。

在 Vue 项目中创建 Canvas 组件

在 Vue 项目的 src 目录下，创建一个名为 Canvas.vue 的文件。这个文件将作为 Canvas 组件。

在 Canvas 组件中添加 Canvas 元素

在 Canvas.vue 文件中，添加以下代码：

<template>
  <canvas ref="canvas" width="1920" height="1080"></canvas>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null
    };
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.ctx = this.canvas.getContext('2d');
    // 在这里渲染图片
  }
};
</script>

在 Canvas 组件中渲染图片

在 Canvas 组件的 mounted() 方法中，我们可以使用 Canvas API 来渲染图片。

// 在这里渲染图片
const image = new Image();
image.onload = () => {
  this.ctx.drawImage(image, 0, 0);
};
image.src = require('@/assets/banner.png');

五、使用 CSS 实现位移和景深效果

现在，我们已经将图片渲染到 Canvas 上了，接下来我们需要使用 CSS 来实现位移和景深效果。

在 Vue 项目中添加 CSS 文件

在 Vue 项目的 src 目录下，创建一个名为 style.css 的文件。这个文件将作为 CSS 文件。

在 CSS 文件中添加 CSS 代码

在 style.css 文件中，添加以下代码：

.canvas-container {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

.canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.canvas-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.5;
  pointer-events: none;
}