1.介绍

canvas 是 HTML5 引入的一个强大元素，用于在网页上绘制图形。它为开发者提供了一种在网页里绘制2D图形的机制，并且可以在其上进行动态图形渲染。canvas 元素本身是一个容器，必须通过 JavaScript 来绘制图像。
一个简单的 canvas 元素示例如下：

<canvas id="myCanvas" width="400" height="300"></canvas>

1.1 如何使用

获取 Canvas 画布
在 JavaScript 中，你需要获取 canvas 元素的 2D 渲染上下文，该上下文提供了绘制线条、矩形、文本等的方法：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

1.2 常用功能

• 图片绘制: 可以通过 drawImage() 方法在 canvas 上显示图片。
• 动画: 通过不断更新 canvas 的内容，可以创建动画效果。
• 事件处理: 可以通过 JavaScript 绑定事件监听器，以实现与用户交互。

2.代码

我们直接给chatgpt提示词，让他给我们画，大概内容就是: 使用canvas绘制一个点点星光浮动的画面，星光是朝右上角动的，星星有的小有的比小的大一点，有淡黄色的，有淡紫色的，还有偶尔几个快速划过的流星，为透明背景，然后集成到我的vue项目的首页index.vue中
然后我们创建一个组件StarAnimation.vue

<template>
  <canvas ref="starCanvas" class="star-canvas"></canvas>
</template>

\<script setup\>
import { ref, onMounted, onBeforeUnmount } from 'vue';


const starCanvas = ref(null);
const ctx = ref(null);
const stars = ref(\[\]);
const numStars = 300; // 减少星星数量以增加稀疏感
const numMeteors = 3; // 减少流星数量
const meteorChance = 0.005; // 流星出现的概率


class Star {
constructor() {
this.x = Math.random() \* window.innerWidth;
this.y = Math.random() \* window.innerHeight;
this.size = Math.random() \* 1 + 0.5; // 大小在0.5到1.5之间
this.speedX = (Math.random() - 0.5) \* 0.3 + 0.1; // 随机水平速度，总体朝右
this.speedY = (Math.random() - 0.5) \* 0.3 - 0.1; // 随机垂直速度，总体朝上
this.color = Math.random() \< 0.5 ? '#ffffcc' : '#cc99ff'; // 淡黄色或淡紫色
}


update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x \> window.innerWidth \|\| this.x \< 0 \|\| this.y \> window.innerHeight \|\| this.y \< 0) {
this.x = Math.random() \* window.innerWidth;
this.y = Math.random() \* window.innerHeight;
}
}


draw() {
ctx.value.beginPath();
ctx.value.arc(this.x, this.y, this.size, 0, Math.PI \* 2);
ctx.value.fillStyle = this.color;
ctx.value.fill();
}
}


class Meteor {
constructor() {
this.x = Math.random() \* window.innerWidth;
this.y = Math.random() \* window.innerHeight;
this.size = Math.random() \* 2 + 1;
this.speed = Math.random() \* 5 + 4; // 加快流星速度
this.angle = Math.random() \* Math.PI / 4; // 随机角度
this.color = '#ffffff';
}


update() {
this.x += this.speed \* Math.cos(this.angle);
this.y -= this.speed \* Math.sin(this.angle);
if (this.x \> window.innerWidth \|\| this.x \< 0 \|\| this.y \> window.innerHeight \|\| this.y \< 0) {
this.x = Math.random() \* window.innerWidth;
this.y = Math.random() \* window.innerHeight;
}
}


draw() {
ctx.value.beginPath();
ctx.value.moveTo(this.x, this.y);
ctx.value.lineTo(this.x - 10 \* Math.cos(this.angle), this.y + 10 \* Math.sin(this.angle));
ctx.value.strokeStyle = this.color;
ctx.value.lineWidth = this.size;
ctx.value.stroke();
}
}


function init() {
for (let i = 0; i \< numStars; i++) {
stars.value.push(new Star());
}
for (let i = 0; i \< numMeteors; i++) {
stars.value.push(new Meteor());
}
}


function animate() {
ctx.value.clearRect(0, 0, window.innerWidth, window.innerHeight);


stars.value.forEach(star =\> {
star.update();
star.draw();
});


// 偶尔生成流星
if (Math.random() \< meteorChance) {
stars.value.push(new Meteor());
}


requestAnimationFrame(animate);
}


onMounted(() =\> {
ctx.value = starCanvas.value.getContext('2d');
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
init();
animate();


window.addEventListener('resize', () =\> {
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
stars.value = \[\];
init();
});
});


onBeforeUnmount(() =\> {
window.removeEventListener('resize', () =\> {
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
stars.value = \[\];
init();
});
});
\</script\>

`<style scoped>
.star-canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: transparent;
}
</style>`

可以自己调整星星的数量 大小和流行出现的频率

然后我们在要显示的页面加上我们的组件，然后略微修改下透明度就大功告成了

<template>
  <div class="home">
    <StarAnimation />
    <!-- 其他内容 -->
  </div>
</template>

\<script setup\>
import StarAnimation from './components/StarAnimation.vue';
\</script\>

`<style scoped>
.home {
position: relative;
z-index: 1;
opacity: 0.6;
}
</style>
`