canvas绘制文字，实现自动换行，并且添加高亮

爱吃吃鱼

已于 2024-07-09 11:30:24 修改

阅读量386

点赞数 5

分类专栏：前端学习 css 文章标签： html canva可画 css

于 2024-07-04 15:52:48 首次发布

本文链接：https://blog.csdn.net/m0_59212993/article/details/134581086

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

学习

4 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.png" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
  </head>
  <body>
    <canvas id="myCanvas" width="350" height="500"></canvas>
    <script>
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");
      const maxWidth = 350; // 单行最大宽度
      const fontSize = 16; // 字号
      const font = `${fontSize}px Arial`; // 字体设置

      ctx.font = font;
      ctx.fillStyle = "black"; // 初始文字颜色为黑色

      let textLength = false;

      const text =
        "这是一段较长的文本，需要在达到最大宽度时自动换行。这是一段较长的文本，需要在达到最大宽度时自动换行需要在达到最大宽度时自动换行。";
      let x = 10; // 起始 x 坐标
      let y = 100; // 起始 y 坐标
      let currentLineWidth = 0;

      for (let i = 0; i < text.length; i++) {
        const char = text[i];
        const charWidth = ctx.measureText(char).width;
        if (currentLineWidth + charWidth > maxWidth) {
          // 超出最大宽度，换行
          y += fontSize + 5; // 行高加 5 作为行间距
          currentLineWidth = 0; // 重置当前行宽度
        }

        ctx.fillText(char, x + currentLineWidth, y);
        currentLineWidth += charWidth;

        if (i === 4) {
          // 到达前5个字，切换颜色为红色
          ctx.fillStyle = "red";
        }

        if (
          i === text.length - 1 &&
          currentLineWidth + charWidth + fontSize > maxWidth //如果
        ) {
          textLength = true;
        }
      }

      ctx.fillStyle = "black"; // 恢复文字颜色为黑色
      if (textLength) {
        ctx.fillText("这是结尾的文字", x, (y += fontSize + 5));
      } else {
        ctx.fillText("这是结尾的文字", x + currentLineWidth, y);
      }
    </script>
  </body>
</html>