canvas之文字换行 原
当canvas的宽度不够宽时，canvas不会自动换行，可以用下面的代码处理
<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)位置绘制文本边框，绘制的最大宽度是可选的.
设置样式
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
textAlign = value
文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/11/27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录