<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas实现文字添加渲染换行</title> <style> *{ margin:0; padding: 0; } #canvas{ margin:0 auto; text-align: center; } </style> </head> <body> <canvas id="canvas"></canvas> </body> <script> var string = "www.baidu.con"; //绘制文字到canvas，判断换行位置，和设置canvas高度 function canvasWrapText(options) { //有时候设置的文字显示不全，需要仔细摸索行高，和绘制起始y坐标和字体大小之间的关系 更简单粗暴的就是下面canvas.height 赋值的时候多赋值点 var settings = { canvas:document.createElement("canvas"), //canvas对象，必填，不填写默认创建一个canvas canvasWidth:580, //canvas的宽度 canvasMinHeight:580, //canvas的最小高度,如果不需要可以设置为0 drawStartX:10, //绘制字符串起始x坐标 drawStartY:15, //绘制字符串起始y坐标 lineHeight:30, //文字的行高 font:"24px 'Microsoft Yahei'", //文字样式 text:"请修改掉默认的配置", //需要绘制的文本 drawWidth:560, //文字显示的宽度 color:"#000000", //文字的颜色 backgroundColor:"#fff00f" //背景颜色 }; //将传入的配置覆盖掉默认配置 if(!!options && typeof options === "object"){ for(var i in options){ settings[i] = options[i]; } } //获取2d的上线文开始设置相关属性 var canvas = settings.canvas; canvas.width = settings.canvasWidth; var ctx = canvas.getContext("2d"); //绘制文字 ctx.font = settings.font; ctx.fillStyle = settings.color; var lineWidth = 0; //当前行的绘制的宽度 var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标 //由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中 var arr = []; for(var i = 0; i<settings.text.length; i++){ //获取当前的截取的字符串的宽度 lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width; if(lineWidth > settings.drawWidth){ //判断最后一位是否是标点符号 if(judgePunctuationMarks(settings.text[i-1])){ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex)); lastTextIndex = i; }else{ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1)); lastTextIndex = i-1; } } //将最后多余的一部分添加到数组 if(i === settings.text.length - 1){ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1)); } } //根据arr的长度设置canvas的高度 canvas.height = arr.length*settings.lineHeight; //判断是否达到最小高度 if(canvas.height < settings.canvasMinHeight){ //重新设置起始位置 settings.drawStartY += (settings.canvasMinHeight-canvas.height)/2; canvas.height = settings.canvasMinHeight; } //绘制背景色 ctx.fillStyle = settings.backgroundColor; ctx.fillRect(0,0,canvas.width,canvas.height); //设置字体颜色 ctx.font = settings.font; ctx.textBaseline = "middle"; //ctx.textAlign = "center"; //字体居中 ctx.fillStyle = settings.color; var textX = (parseFloat(options.drawWidth) - parseFloat(ctx.measureText(options.text).width))/2; console.info(textX) for(var i =0; i<arr.length; i++){ ctx.fillText(arr[i],textX,settings.drawStartY+i*settings.lineHeight); } //判断是否是需要避开的标签符号 function judgePunctuationMarks(value) { var arr = [".",",",";","?","!",":",""","，","。","？","！","；","：","、"]; for(var i = 0; i< arr.length; i++){ if(value === arr[i]){ return true; } } return false; } return canvas.toDataURL(); } //调用函数获取到img的data数据 var data = canvasWrapText({ canvas:document.getElementById("canvas"), text:string, canvasWidth : 580, drawWidth : 560 }); /*--------------------------如果只需要在canvas里面显示，那就只需要调用函数，会直接显示在canvas里面-------------------------------*/ //创建一个img对象，在页面上显示打印的数据 var img = document.createElement("img"); img.src = data; document.body.appendChild(img); </script> </html>