feat: 绘制Header和Legend

miniprogram/demoPages/textPaint2/textPaint.ts

@@ -1,3 +1,5 @@
+import TextDrawService from '../../canvasService/textDrawService';
+
 Page({
     canvas: null as Canvas | null,
     ctx: null as RenderingContext | null,
@@ -44,11 +46,14 @@ Page({
                 const canvas = res[0].node;
                 const ctx = canvas.getContext('2d');
 
+                const textDrawService = new TextDrawService(canvas, ctx);
+                textDrawService.draw();
+
                 this.canvas = canvas;
                 this.ctx = ctx;
-                this.setCanvasSize(canvas, ctx);
+                // this.setCanvasSize(canvas, ctx);
                 // ctx.fillRect(0, 0, 2480, 3508);
-                this.drawGameBoard(ctx);
+                // this.drawGameBoard(ctx);
             });
     },
 
@@ -85,14 +90,17 @@ Page({
         const canvas = this.canvas as Canvas;
         ctx = ctx || (this.ctx as RenderingContext);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#333'; // 设置填充色为白色
+        ctx.fillStyle = '#fff'; // 设置填充色为白色
         ctx.fillRect(0, 0, 2480, 3508); // 覆盖整个A4画布
 
         // 绘制标题
+        // 绘制标题并居中显示
         ctx.font = 'bold 80px "Microsoft Yahei"';
         ctx.fillStyle = '#333';
-        ctx.fillText('找一找  涂  色', 1240 - ctx.measureText('找一找  涂  色').width / 2, 150);
-
+        ctx.textAlign = 'center';
+        const titleX = canvas.width / 2;
+        const titleY = 150;
+        ctx.fillText('找一找  涂  色', titleX, titleY);
         // 绘制颜色示例（顶部）
         this.drawColorLegend(ctx, 250);