canvas单、多行文本通过配置参数循环写入
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>canvas - writeText</title>
<style>
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:24px; line-height:2em; color:#000;
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
touch-callout:none;
}
html , body{ height:100%; position:relative;}
#mycanvas{ width:100%; height:100%; vertical-align:middle;}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//多行文本写入设置
//ctx_2d getContext("2d") 对象
//lineheight 段落文本行高
//bytelength 设置单字节文字一行内的数量
//text 写入画面的段落文本
//startleft 开始绘制文本的 x 坐标位置（相对于画布）
//starttop 开始绘制文本的 y 坐标位置（相对于画布）
//maxLine 显示的行数，超出则截取掉
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop, maxLine){
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){
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++){
if(i > maxLine){
break;
}
var tl = cutString(text, bytelength);
//ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
ctx_2d.fillText(text.substr(0, tl), startleft, (i-1) * lineheight + starttop);
text = text.substr(tl);
}
}
var mycanvas = document.getElementById("mycanvas");
mycanvas.width = $('body').width();
mycanvas.height = $('body').height();
var ctx1 = mycanvas.getContext("2d");
//设置要写入canvas中文本信息（对齐方式、文本内容、字号、是否加粗【bold】、是否倾斜【italic】、颜色、x位置、y位置、是否多行文本、多行文本的行高、多行文本每行英文字符数【中文字符数*2 = 英文字符数】）
var writeTextData = {
name: {textBaseline:'top',textAlign:'right',text:'',font_size:26,bold_style:'bold',italic_style:'italic',color:'#2d78f4',x:616,y:250,moreline:false,moreline_height:'',moreline_text_len:''},
dateText:{textBaseline:'top',textAlign:'right',text:'',font_size:26,bold_style: '',italic_style:'italic',color:'#2d78f4',x:616,y:290,moreline:false,moreline_height:'',moreline_text_len:''},
content: {textBaseline:'top',textAlign:'left' ,text:'',font_size:28,bold_style:'bold',italic_style: '',color:'#2d78f4',x:24 ,y:110 ,moreline:true ,moreline_height:42,moreline_text_len:44},
};
//可动态再设置文本
writeTextData.name.text = '—— 姓名';
writeTextData.dateText.text = new Date().toLocaleDateString();
writeTextData.content.text = ' 测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本';
writeTextData.content.text = ' 测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本';
//向canvas中写入文本
setText();
function setText(){
for (key in writeTextData) {
ctx1.textBaseline = writeTextData[key].textBaseline;
ctx1.textAlign = writeTextData[key].textAlign;
//多行的字
if(writeTextData[key].moreline){
//投影的字
ctx1.fillStyle = '#000000';
ctx1.font = writeTextData[key].bold_style + ' ' + writeTextData[key].italic_style + ' ' + writeTextData[key].font_size + 'px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';
writeTextOnCanvas(ctx1,writeTextData[key].moreline_height,writeTextData[key].moreline_text_len,writeTextData[key].text, writeTextData[key].x + 2, writeTextData[key].y + 2, 3);
//正常的字
ctx1.fillStyle = writeTextData[key].color;
ctx1.font = writeTextData[key].bold_style + ' ' + writeTextData[key].italic_style + ' ' + writeTextData[key].font_size + 'px "PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';
writeTextOnCanvas(ctx1,writeTextData[key].moreline_height,writeTextData[key].moreline_text_len,writeTextData[key].text, writeTextData[key].x , writeTextData[key].y, 3);
//单行的字
}else{
//投影的字
ctx1.fillStyle = '#000000';
ctx1.font = writeTextData[key].bold_style + ' ' + writeTextData[key].italic_style + ' ' + writeTextData[key].font_size + 'px "font1","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';
ctx1.fillText(writeTextData[key].text, writeTextData[key].x + 2, writeTextData[key].y + 2);
//正常的字
ctx1.fillStyle = writeTextData[key].color;
ctx1.font = writeTextData[key].bold_style + ' ' + writeTextData[key].italic_style + ' ' + writeTextData[key].font_size + 'px "font1","PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"';
ctx1.fillText(writeTextData[key].text, writeTextData[key].x , writeTextData[key].y);
}
}
}
</script>
</body>
</html>