html2canvas⾃动换⾏,canvas绘制⽂本⾃动换⾏终于到⼀个 canvas ⾃动换⾏的处理脚本，记录啊下来
CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight){
if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
return;
}
var context = this;
var canvas = context.canvas;
if (typeof maxWidth == 'undefined') {
maxWidth = (canvas && canvas.width) || 300;
}
if (typeof lineHeight == 'undefined') {
lineHeight = (canvas && ComputedStyle(canvas).lineHeight)) ||
ComputedStyle(document.body).lineHeight);
}
// 字符分隔为数组
var arrText = text.split('');
var line = '';
for (var n = 0; n < arrText.length; n++) {
var testLine = line + arrText[n];
var metrics = asureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = arrText[n];
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
};
在链接页⾯还带着⼀些特效
借助SVG 直接把CSS效果绘制上去
var canvas = document.querySelector('canvas');
var context = Context('2d');
context.font = '16px sans-serif';
var width = canvas.width;
var height = canvas.height;
var tempImg = new Image();
tempImg.width = width;
tempImg.height = height;
// 把img绘制在canvas画布上
context.drawImage(this, 0, 0, width, height);
};
tempImg.src = 'data:image/svg+xml;charset=utf-8，我是⼀段需要换⾏的⽂字啦啦啦'; canvas⽀持字符间距
使⽤ css
的 letter-spacing
属性
var canvas = document.querySelector('canvas');
var context = Context('2d');
var range = document.querySelector('input[type=range]');
// 绘制⽅法
var draw = function (){
// 清除之前的绘制
context.clearRect(0, 0, canvas.width, canvas.height);
// 字符间距设置
canvas.style.letterSpacing = range.value + 'px';
// 并绘制⽂本，font属性值设置⼀定要在这⾥
context.font = '32px sans-serif';
context.fillText('我是⼀段⽂本', 0, 50);
};
// 改变字符间距后重绘
range.addEventListener('change', draw);
// ⼀进来根据默认值绘制
draw();
使⽤ canvas
计算逐字绘制
CanvasRenderingContext2D.prototype.letterSpacingText = function (text, x, y, letterSpacing){ var context = this;
var canvas = context.canvas;
if (!letterSpacing && canvas) {
letterSpacing = ComputedStyle(canvas).letterSpacing);
}
if (!letterSpacing) {
return this.fillText(text, x, y);
}
var arrText = text.split('');
var align = Align || 'left';
// 这⾥仅考虑⽔平排列
var originWidth = asureText(text).width;
// 应⽤letterSpacing占据宽度
var actualWidth = originWidth + letterSpacing * (arrText.length - 1);
// 根据⽔平对齐⽅式确定第⼀个字符的坐标
if (align == 'center') {
x = x - actualWidth / 2;
} else if (align == 'right') {
x = x - actualWidth;
}
/
/ 临时修改为⽂本左对齐
// 开始逐字绘制
arrText.forEach(function (letter){
var letterWidth = asureText(letter).width;
context.fillText(letter, x, y);
// 确定下⼀个字符的横坐标
x = x + letterWidth + letterSpacing;
});
// 对齐⽅式还原
};
canvas⽀持竖直排列
CanvasRenderingContext2D.prototype.fillTextVertical = function (text, x, y){ var context = this;
var canvas = context.canvas;
var arrText = text.split('');
var arrWidth = arrText.map(function (letter){
asureText(letter).width;
});
var align = Align;
var baseline = Baseline;
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;
}
// 开始逐字绘制
arrText.forEach(function (letter, index){
// 确定下⼀个字符的纵坐标位置
var letterWidth = arrWidth[index];
// 是否需要旋转判断
var code = letter.charCodeAt(0);
if (code <= 256) {
// 英⽂字符，旋转90°
} else if (index > 0 && text.charCodeAt(index - 1) < 256) { // y修正
y = y + arrWidth[index - 1] / 2;
svg canvas}
context.fillText(letter, x, y);
// 旋转坐标系还原成初始态
context.setTransform(1, 0, 0, 1, 0, 0);
// 确定下⼀个字符的纵坐标位置
var letterWidth = arrWidth[index];
y = y + letterWidth;
});
// ⽔平垂直对齐⽅式还原
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。