小程序
小游戏
企业微信
微信支付
扫描小程序码分享
请问Canvas怎么设置文字换行和行高啊? 好像api没看到,自己试了\r\n也没什么用。如果没有的话,如果我想做这种证书类的只能一行一行绘制吗?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
canvasWidth:文本宽度
lines: 行数
*/
function
canvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth, lines) {
var
ctx = canvas.getContext(
"2d"
);
lineWidth = 0;
lastSubStrIndex = 0;
beginLineHeight = lineHeight;
beginY = initY;
for
(let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if
(lineWidth > canvasWidth - initX) {
//减去initX,防止边界出现的问题
(initY >= beginY + beginLineHeight * (lines-1)) {
ctx.fillText(str.substring(lastSubStrIndex, i - 1) +
'...'
, initX, initY);
return
;
}
else
{
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
lastSubStrIndex = i;
(i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
参考一下
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
canvasWidth:文本宽度
lines: 行数
*/
function
canvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth, lines) {
var
ctx = canvas.getContext(
"2d"
);
var
lineWidth = 0;
var
lastSubStrIndex = 0;
var
beginLineHeight = lineHeight;
var
beginY = initY;
for
(let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if
(lineWidth > canvasWidth - initX) {
//减去initX,防止边界出现的问题
if
(initY >= beginY + beginLineHeight * (lines-1)) {
ctx.fillText(str.substring(lastSubStrIndex, i - 1) +
'...'
, initX, initY);
return
;
}
else
{
ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY);
initY += lineHeight;
lineWidth = 0;
lastSubStrIndex = i;
}
}
if
(i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
}
参考一下