<!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>