小程序
小游戏
企业微信
微信支付
扫描小程序码分享
请问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: 行数*/functioncanvasTextAutoLine(str, canvas, initX, initY, lineHeight, canvasWidth, lines) {varctx = canvas.getContext("2d");varlineWidth = 0;varlastSubStrIndex = 0;varbeginLineHeight = lineHeight;varbeginY = 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);}}}参考一下