<template>
  <canvas ref="canvas" />
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext("2d");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    let count = 0;

    const render = () => {
      count += 5;
      ctx.fillStyle = `hsl(${count % 360}, 100%, 50%)`;
      ctx.font = "bold 200px sans-serif";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("CSDN", canvas.width / 2, canvas.height / 2);

      requestAnimationFrame(render);
    };


    render();
  },
};
</script>

<style>
canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
