canvas是H5中非常重要,非常常用,也是非常强大的一个新标签,美中不足的事,canvas中没没有自动换行的属性,我的第一反应是,字符串截取,然后计算每行的距离来实现自动换行..
然后百度了一下,已经有前辈写了个demo,在此记录,以帮忙同样有次困扰的道友..
html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>filltext</title>
</head>
<body>
<canvas id="ft" width="400" height="400" style="background-color: #000;">您的浏览器不支持canvas。</canvas><br>
<textarea id="input" row="6" col="60" style="width:300px;height: 100px;">这是一段测试字符串。This is an test string.当在文本框输入内容后会同步显示到canvas上。这是一段测试字符串。This is an test string.当在文本框输入内容后会同步显示到canvas上。</textarea>
</body>
</html>
js:
(function(){
function writeTextOnCanvas(cns, lh, rw, text){
var cns = document.getElementById(cns);
var ctx = cns.getContext("2d");
var lineheight = lh;
var text = text;
ctx.width = cns.width;
ctx.height = cns.height;
ctx.clearRect(0, 0, ctx.width, ctx.height);
ctx.font = "16px 微软雅黑";
ctx.fillStyle = "#f00";
function getTrueLength(str){//获取字符串的真实长度（字节长度）
var len = str.length, truelen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
truelen += 2;
}else{
truelen += 1;
}
}
return truelen;
}
function cutString(str, leng){//按字节长度截取字符串，返回substr截取位置
var len = str.length, tlen = len, nlen = 0;
for(var x = 0; x < len; x++){
if(str.charCodeAt(x) > 128){
if(nlen + 2 < leng){
nlen += 2;
}else{
tlen = x;
break;
}
}else{
if(nlen + 1 < leng){
nlen += 1;
}else{
tlen = x;
break;
}
}
}
return tlen;
}
for(var i = 1; getTrueLength(text) > 0; i++){
var tl = cutString(text, rw);
ctx.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), 10, i * lineheight + 50);
text = text.substr(tl);
}
}
writeTextOnCanvas("ft", 22, 40, document.getElementById("input").value);
document.getElementById("input").onkeyup = function(){
writeTextOnCanvas("ft", 22, 40, this.value);
}
})();
同样希望有大牛能给出更好的解决方法.
代码出处:http://runjs.cn/detail/xr5uqeze
尊重别人的劳动成果,转载请注明出处.
时间： 2024-10-20 08:55:50