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>
&lt;script setup&gt;
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() &lt; 0.5 ? '#ffffcc' : '#cc99ff'; // 淡黄色或淡紫色
}
update() {
this.x += this.speedX;
this.y += this.speedY;
if (this.x &gt; window.innerWidth || this.x &lt; 0 || this.y &gt; window.innerHeight || this.y &lt; 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 &gt; window.innerWidth || this.x &lt; 0 || this.y &gt; window.innerHeight || this.y &lt; 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 &lt; numStars; i++) {
stars.value.push(new Star());
}
for (let i = 0; i &lt; numMeteors; i++) {
stars.value.push(new Meteor());
}
}
function animate() {
ctx.value.clearRect(0, 0, window.innerWidth, window.innerHeight);
stars.value.forEach(star =&gt; {
star.update();
star.draw();
});
// 偶尔生成流星
if (Math.random() &lt; meteorChance) {
stars.value.push(new Meteor());
}
requestAnimationFrame(animate);
}
onMounted(() =&gt; {
ctx.value = starCanvas.value.getContext('2d');
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
init();
animate();
window.addEventListener('resize', () =&gt; {
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
stars.value = [];
init();
});
});
onBeforeUnmount(() =&gt; {
window.removeEventListener('resize', () =&gt; {
starCanvas.value.width = window.innerWidth;
starCanvas.value.height = window.innerHeight;
stars.value = [];
init();
});
});
&lt;/script&gt;
&lt;style scoped&gt; .star-canvas { position: fixed; top: 0; left: 0; z-index: -1; background-color: transparent; } &lt;/style&gt;

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

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

<template>
  <div class="home">
    <StarAnimation />
    <!-- 其他内容 -->
  </div>
</template>
&lt;script setup&gt;
import StarAnimation from './components/StarAnimation.vue';
&lt;/script&gt;
&lt;style scoped&gt; .home { position: relative; z-index: 1; opacity: 0.6; } &lt;/style&gt;