Canvas自定义文字旋转缩放渲染

最近遇到一个新需求，需要以给定的参数，在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 = 160let 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()

实现效果

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！