Auto commit

src/App.vue

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