<template>
  <canvas ref="canvas" /> <!-- 创建一个canvas标签，并使用ref属性引用 -->
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas; // 获取canvas标签的引用
    const ctx = canvas.getContext("2d"); // 获取canvas上下文

    canvas.width = window.innerWidth; // 设置canvas的宽度等于窗口的宽度
    canvas.height = window.innerHeight; // 设置canvas的高度等于窗口的高度
    ctx.fillStyle = "black"; // 设置canvas的填充颜色为黑色
    ctx.fillRect(0, 0, canvas.width, canvas.height); // 以黑色填充整个canvas

    let count = 0; // 定义一个计数器

    const render = () => { // 定义一个渲染函数
      count++; // 计数器自增
      ctx.fillStyle = `hsl(${count % 360}, 100%, 50%)`; // 根据计数器的值给canvas设置渐变色
      ctx.font = "bold 200px sans-serif"; // 设置canvas文字的样式
      ctx.textAlign = "center"; // 设置canvas文字的水平对齐方式为居中
      ctx.textBaseline = "middle"; // 设置canvas文字的垂直对齐方式为居中
      ctx.fillText("CSDN", canvas.width / 2, canvas.height / 2); // 在canvas中央绘制文字

      requestAnimationFrame(render); // 不断地重绘canvas
    };

    render(); // 调用渲染函数
  },
};
</script>

<style>
/* 将 canvas 的定位设置为 fixed，使其始终覆盖整个窗口 */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* 将 canvas 的宽度设置为 100% */
  height: 100%; /* 将 canvas 的高度设置为 100% */
}
</style> 

