Sat May 6 11:03:00 UTC 2023 inscode

src/App.vue

 <template>
-  <canvas ref="canvas" />
+  <canvas ref="canvas" /> <!-- 创建一个canvas标签，并使用ref属性引用 -->
 </template>
 
 <script>
 export default {
   mounted() {
-    const canvas = this.$refs.canvas;
-    const ctx = canvas.getContext("2d");
+    const canvas = this.$refs.canvas; // 获取canvas标签的引用
+    const ctx = canvas.getContext("2d"); // 获取canvas上下文
 
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    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;
+    let count = 0; // 定义一个计数器
 
-    const render = () => {
-      count++;
-      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);
+    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);
+      requestAnimationFrame(render); // 不断地重绘canvas
     };
 
-    render();
+    render(); // 调用渲染函数
   },
 };
 </script>
 
 <style>
+/* 将 canvas 的定位设置为 fixed，使其始终覆盖整个窗口 */
 canvas {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100%; /* 将 canvas 的宽度设置为 100% */
+  height: 100%; /* 将 canvas 的高度设置为 100% */
 }
-</style>
+</style> 
+