canvas文本自动换行

在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写。在此参考文章html5-canvas的绘制文本自动换行来做改写。

根据canvas宽度来做折行

在此根据项目的情况让文本占canvas的八分之五,具体可以根据情况改变所占百分比来显示。

/*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高
*/
function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
    var ctx = canvas.getContext("2d");
    var lineWidth = 0;
    var canvasWidth = c.width;
    var lastSubStrIndex= 0;
    for(let i=0;i<str.length;i++){
        lineWidth+=ctx.measureText(str[i]).width;
        if(lineWidth>canvasWidth/8*5){
            ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
            initY+=lineHeight;
            lineWidth=0;
            lastSubStrIndex=i;
        }
        if(i==str.length-1){
            ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
        }
    }
  }

根据字节数来做折行

参考文章canvas文本换行处理

调用:

var my_cvs = document.getElementById("my_cvs");
var ctx_2d = my_cvs.getContext("2d");
writeTextOnCanvas(ctx_2d,30,24,‘文字内容文字内容文字内容文字内容‘,182,607);

函数:

//ctx_2d        getContext("2d") 对象
//lineheight    段落文本行高
//bytelength    设置单字节文字一行内的数量
//text          写入画面的段落文本
//startleft     开始绘制文本的 x 坐标位置(相对于画布)
//starttop      开始绘制文本的 y 坐标位置(相对于画布)
function writeTextOnCanvas(ctx_2d, lineheight, bytelength, text ,startleft, starttop){
    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, bytelength);
        ctx_2d.fillText(text.substr(0, tl).replace(/^\s+|\s+$/, ""), startleft, (i-1) * lineheight + starttop);
        text = text.substr(tl);
    }
}  
时间: 2025-01-02 03:53:26

canvas文本自动换行的相关文章

html5 canvas文本处理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Sublime 小技巧:文本自动换行显示?

Sublime Text tip for wrap line 题记:虽然现在写代码时,一般各种语言的规范都会说写一行代码不要超过好多好多字,如PEP8是79个字符,以便于阅读.但是,有时候还是需要的,如看log,文档等. 有人喜欢默认显示这样的:(强迫症患者) 自动换行显示 也有人喜欢默认显示成那样的:(随心所欲者) 单行显示 也有人喜欢一会这样,一会那样的.(不折腾会死星人) so Sublime 可以通过设置配置,快捷键和插件满足各种不同的需求. 配置 如果想默认打开文件即换行显示,在选项配

CSS3让文本自动换行——word-break属性

1.依靠浏览器让文本自动换行 浏览器本身都自带着让文本自动换行的功能. 2.指定自动换行的处理方法 在CSS3中,可以使用word-break属性来自己决定自动换行的处理方法. div{ word-break:break-all; } word-break属性可以使用的值 值 换行规则 IE5以上 Safari与Chrome normal 使用浏览器默认的换行规则 支持 支持 keep-all 只能在半角空格或连字符处换行 支持 不支持 break-all 允许在单词内换行 支持 支持 当wor

微信小程序 canvas 文字自动换行

Page({ drawCanvas: function(ctx) {// 地址 ctx.setFontSize(14) ctx.setFillStyle('#9E7240') ctx.textAlign="center"; const txHash = this.data.info.txHash ? this.data.info.txHash : '暂无信息' this.drawText(ctx,txHash,187, 517 , 232,232) // 自动换行 ctx.draw()

CSS控制文本自动换行

1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{ //white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 white-space:nowrap; } 自动换行 div{ word-wrap: break-word; //word-break设置强行换行;normal 亚洲语言和非亚洲语言的文本规则,允许在字内换行 word-break: normal; } 强制英文单词断行 div{

Canvas文本操作

Canvas的画图环境提供三个方法如:绘制填充文本:fillText();绘制描边文本:strokeText();绘制文本并返回一个对象:measure();measure()方法返回的对象中包括一个width属性,该属性表达绘制的文本所占领的宽度. <canvas id="canvas1" width="300" height="150"></canvas> var canvas = document.getElemen

【 D3.js 高级系列 — 1.1 】 封装文本自动换行

在[高级 - 第 1.0 章]中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能,本文对此功能进行一下封装,以后就可以直接用了. 1. 引用 js 文件 下载地址:multext.js 下载之后,在 <script> 标签里引用: <script src="multext.js" charset="utf-8"></script> 或者直接通过网址引用: <script src="htt

封装canvas文本函数

最近没事看了会canvas的API,发现canvas在绘图很多方面都很强.但是在文本API上就显得不够深入. 比如,文本换行,或文本区域等.花了点时间,写了个小函数.也不知道能不能用上.记录下.欢迎指教. <!DOCTYPE html><html><meta charset="utf-8"> <body> <canvas id="myCanvas" width="555" height=&qu

canvas文字自动换行、圆角矩形画法、生成图片手机长按保存

canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineHeight:字行高,自己定义个值即可 function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){ var ctx = canvas.getContext("2d"); var lineWidth = 0; var canv