说明

ctx.font = "30px sans-serif" //文字字型 大小
ctx.fillStyle="#00A0E9" // 文字填满颜色
ctx.strokeStyle="#D50A17" // 文字边框
ctx.fillText("...", 10, 100) //填满文字 位置
ctx.strokeText("", 10, 150) // 边框文字

fillText()

该CanvasRenderingContext2D方法 fillText()，画布2D API的一部分，在指定的坐标绘制的文本字符串，与当前的填充字符串的字符 fillStyle。一个可选参数允许指定渲染文本的最大宽度，用户代理将通过压缩文本或使用较小的字体大小来实现。

CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

const handleMouseDown = ()=>{
  case "text":
    ctx.font = "50px serif";
    ctx.fillText("你好", point?.x, point?.y);
    break;
 }

思考

简单来说，在canvas填上文字只需要使用fillText，但在小画家上面，我们需要的是能够输入文字！所以我们要将点击的位置改为建立一个输入框框，在按下enter後，能够完成输入，来看看如何实作吧。

点击

改写刚才的点击行为

const handleMouseDown = ()=>{
  case "text":
     addText(event.clientX, event.clientY, point);
        break;
 }

/** 建立一个输入匡 */
  const addText = (x: number, y: number, point: any) => {
    const input = document.createElement("input");
    input.type = "textarea";
    input.style.position = "fixed";
    input.style.left = x - 4 + "px";
    input.style.top = y - 4 + "px";
    input.style.zIndex = "100";
    input.onkeydown = (event) => handleEnter(event, input, point);
    document.body.appendChild(input);
    input.focus();
  };

/** 控制完成输入 */
  const handleEnter = (event: any, input: any, point: pointIF) => {
    const keyCode = event.keyCode;
    if (keyCode === 13) {
      drawText(input.value, point.x, point.y);
      document.body.removeChild(input);
    }
  };

/** 完成输入後绘制到 canvas 上 */
  function drawText(txt: string, x: any, y: any) {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.textBaseline = "top";
    ctx.textAlign = "left";
    ctx.font = "14px sans-serif";
    ctx.fillText(txt, x - 4, y - 4);
  }

接下来只需要改写样式跟控制框框大小就可以完成啦！