当前位置：首页 > news >正文

小程序使用Canvas设置文字竖向排列

news 2025/6/26 6:39:02

在需要使用的js页面引入js文件,传入对应参数即可

/**
*     文本竖向排列
*/
function drawTextVertical(context, text, x, y) {var arrText = text.split('');var arrWidth = arrText.map(function (letter) {return 26; // 字体间距,需要自定义可以自己加参数,根据传入参数进行设置});var align = context.textAlign;var baseline = context.textBaseline;if (align == 'left') {x = x + Math.max.apply(null, arrWidth) / 2;} else if (align == 'right') {x = x - Math.max.apply(null, arrWidth) / 2;}if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {y = y - arrWidth[0] / 2;} else if (baseline == 'top' || baseline == 'hanging') {y = y + arrWidth[0] / 2;}context.textAlign = 'center';context.textBaseline = 'middle';// 开始逐字绘制arrText.forEach(function (letter, index) {// 确定下一个字符的纵坐标位置var letterWidth = arrWidth[index];// 是否需要旋转判断var code = letter.charCodeAt(0);if (code <= 256) {context.translate(x, y);// 英文字符，旋转90°context.rotate(90 * Math.PI / 180);context.translate(-x, -y);} else if (index > 0 && text.charCodeAt(index - 1) < 256) {// y修正y = y + arrWidth[index - 1] / 2;}context.fillText(letter, x, y);// 旋转坐标系还原成初始态context.setTransform(1, 0, 0, 1, 0, 0);// 确定下一个字符的纵坐标位置var letterWidth = arrWidth[index];y = y + letterWidth;});// 水平垂直对齐方式还原context.textAlign = align;context.textBaseline = baseline;
}module.exports = {drawTextVertical: drawTextVertical
}

示例:

引入js