本文共 1611 字，大约阅读时间需要 5 分钟。

最近遇到一个新需求，需要以给定的参数，在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*160canvas.width = 120 * ratiocanvas.height = 160 * ratiocanvas.style.width = 120canvas.style.height = 160let x = 0 + translateXlet 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 / 2let cy = y + (fontSize * ratio) / 2ctx.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 = 0txtList.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()

实现效果

转载地址：https://blog.csdn.net/weixin_43905402/article/details/108992195 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！