最近遇到一个新需求，需要以给定的参数，在Canvas画板上渲染还原文字。
-
参数如下：
-
translateX（X轴方向上的偏移量）：0 -
translateY（Y轴方向上的偏移量）：92 -
scaleX（X轴上的缩放量）：1 -
scaleY（Y轴上的缩放量）：1 -
rotate（旋转角度）：25 -
fontSize（字体大小）：16 -
fontFamily（字体集）：‘微软雅黑’ -
color（字体颜色）：‘rgb(229,80,80)’ -
txt（带换行的文本，换行标识为\n）：‘我不行了\n快扶我去喝酒’
要求：
文字可能存在多行，最长的一行文字必须能铺满画板的宽度，从画布的左上角（0，0）开始渲染。
实现代码如下：
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let ratio = window.devicePixelRatio * 2 // 防止画出的图模糊，定义倍数
// 画板宽高为120*160
canvas.width = 120 * ratio
canvas.height = 160 * ratio
canvas.style.width = 120
canvas.style.height = 160
let x = 0 + translateX
let y = 0 + translateY
// X方向上缩放
if (scaleX > 1) {
x = x - 120 / 2
} else {
x = x + 120 / 2
}
// Y方向上缩放
if (scaleY > 1) {
y = y - (fontSize * ratio * (scaleY - 1)) / 2
} else {
y = y + (fontSize * ratio * (1 - scaleY)) / 2
}
// 确定旋转的圆心
let cx = x + w / 2
let cy = y + (fontSize * ratio) / 2
ctx.save()
// 旋转
ctx.translate(cx, cy)
ctx.rotate(rotate)
ctx.translate(-cx, -cy)
ctx.fillStyle = color // 设置颜色
ctx.font = fontSize * ratio + 'px ' + fontFamily // 设置字体，字体大小需乘以缩放倍数
ctx.textBaseline = 'top' // 调整文字基线
let txtList = txt.split('\n')
// 一次循环找最长的文字段
let maxWid = 0
txtList.forEach((text) => {
let wid = ctx.measureText(text).width // 利用canvas的API取当前文本的宽度
maxWid < wid ? (maxWid = wid) : ''
})
let sX = (120 * ratio) / maxWid // 该缩放值用于设置文本最长行铺满画板宽度
ctx.scale(sX, 1) // 设置文本最长行铺满画板宽度
ctx.scale(scaleX, scaleY)
txtList.forEach((text, index) => {
// 绘制文字（参数：要写的字，x坐标，y坐标）
ctx.fillText(
text,
x / sX / scaleX, // X轴上进行缩放后，对应坐标需除以sX以及scaleX
(y + fontSize * ratio * index) / scaleY // Y轴上则只需要除以scaleY
)
})
ctx.restore()
实现效果
