<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>fillText Auto-wrap</title>
</head>
<body>
<div>--------横排处理--------</div>
<br>
<canvas id="mycanvasL">您的浏览器不支持canvas。</canvas>
<br>
<textarea id="inputL" row="6" col="60" placeholder="请输入电话号码" style="width:300px;height: 60px;"></textarea>
<br>
<div>--------竖排处理--------</div>
<br>
<canvas id="mycanvas">您的浏览器不支持canvas。</canvas>
<br>
<textarea id="input" row="6" col="60" placeholder="请输入电话号码" style="width:300px;height: 60px;"></textarea>
</body>
</html>
<script>
// 横排处理
function writeTextOnCanvasL(name) {
var cns = document.getElementById('mycanvasL');
var ctx = cns.getContext("2d");
cns.width = '800';
cns.height = '100'
ctx.font = "80px 微软雅黑";
ctx.fillStyle = "#000";
ctx.fillText(name,10,80);
}
// writeTextOnCanvasL('88100000');
document.getElementById("inputL").onkeyup = function() {
// 88100000
writeTextOnCanvasL(this.value);
}
// 竖排处理
function writeTextOnCanvas(name) {
var cns = document.getElementById('mycanvas');
var ctx = cns.getContext("2d");
cns.width = '100';
cns.height = '660'
// ctx.width = '100';
// ctx.height = '800';
// let name = name; // 文本内容
let x = 10,y=100; // 文字开始的坐标
let letterSpacing = 20; // 设置字间距
for(let i = 0; i < name.length; i++){
const str = name.slice(i,i+1).toString();
if(str.match(/[A-Za-z0-9]/)&&(y<576)){ // 非汉字 旋转
ctx.font = "80px 微软雅黑";
ctx.fillStyle = "#000";
ctx.save();
ctx.translate(x,y);
ctx.rotate(Math.PI/180);
ctx.textBaseline = 'bottom';
ctx.fillText(str,0,0);
ctx.restore();
y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
}else if(str.match(/[\u4E00-\u9FA5]/)&&(y<576)){
// ctx.save();
// ctx.textBaseline = 'top';
// ctx.fillText(str,x,y);
// ctx.restore();
// y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
} else {
}
}
}
// writeTextOnCanvas('88100000');
document.getElementById("input").onkeyup = function() {
// 88100000
writeTextOnCanvas(this.value);
}
</script>
