返回

canvas中渲染文字自动换行实现方案

Created By ZOU on Dec 11 2020

在canvas中渲染文字时想要实现自动换行要怎么处理?

我们可以通过这个方法measureText()。

用法:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// 声明文本
const text = 'hellow world'
// 设置字体和字体大小
ctx.font = '30px Arial'
// 调用方法传入文本,返回一个对象,对象包含文本的宽度属性
const width = ctx.measureText(text).width

这样就能获得文本的宽度了,这样想要实现换行就容易了。

下面是实现文字自动换行的代码:

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
/** 获取内容数组 */
function getContents(content, maxWidth, fontSize) {
let width = 0
// 存储内容数组
let contents = []
// 临时存储内容
let tempContent = ''
for (let i = 0; i < content.length; i++) {
// 获取单个字
const contentChar = content[i]
// 设置字体大小
ctx.font = `${fontSize}px Arial`
// 获取单个字的宽度
const _width = ctx.measureText(contentChar).width
// 判断宽度是否小于宽度
if ((width < _width && !tempContent.length) || width + _width <= maxWidth) {
// 宽度增加
width += _width
// 拼接字符
tempContent += contentChar
} else {
// 插入到数组内
contents.push(tempContent)
// 重新设置内容
tempContent = contentChar
// 重新设置宽度
width = _width
}
// 判断是否为最后一个字,则直接插入
if (i === content.length - 1) contents.push(tempContent)
}
// 返回结果
return contents
}
let fontSize = 30
getContents('哈哈哈', 10, fontSize) // ['哈', '哈', '哈']
getContents('哈哈哈哈', 60, fontSize) // ['哈哈', '哈哈']
const contents = getContents('哈哈哈哈', 90, fontSize) // ['哈哈哈', '哈']
// 遍历渲染文本
contents.forEach((content, index) => ctx.fillText(content, 0, index * fontSize))

这样就搞定了,哈哈。

标签: javascript canvas