<!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>
浙公网安备 33010602011771号