当canvas的宽度不够宽时，canvas不会自动换行，可以用下面的代码处理
代码语言：javascript复制<body>
<canvas id="canvas" width="200" height="200" style="background:pink;"></canvas>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var str = "当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理当内容特别多的时候，canvas不会自动换行，需要特别处理";
var canvasWidth = ctx.canvas.width;
ctx.font = "20px Microsoft";
console.log(ctx.measureText(str))
canvas.height = Math.ceil(ctx.measureText(str).width / canvasWidth) * 25;
ctx.font = "16px Microsoft"; //重新定义画布的高度后，需要重新定义字体的大小，否则变成默认值
var initHeight = 25; //绘制字体距离canvas顶部初始的高度
var lastSunStrIndex = 0; //每次开始截取的字符串的索引
var contentWidth = 0;
if (ctx.measureText(str).width <= canvasWidth) {
ctx.fillText(str, 0, initHeight);
return
}
for (let i = 0; i < str.length; i ) {
contentWidth = ctx.measureText(str[i]).width;
if (contentWidth > canvasWidth - 32) {
ctx.fillText(str.substring(lastSunStrIndex, i), 12, initHeight) //绘制未截取的部分
initHeight = 25;
contentWidth = 0;
lastSunStrIndex = i;
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSunStrIndex, i 1), 12, initHeight);
}
}
}
draw()
</script>
</body>关于canvas 绘制文本的方法与样式设置
canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.
设置样式
font = value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
textBaseline = value
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
direction = value
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
(adsbygoogle = window.adsbygoogle || []).push({});
