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

尊重别人的劳动成果,转载请注明出处.

H5 canvas填充文字自动换行的更多相关文章

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

    canvas的文字自动换行函数封装 // str:要绘制的字符串 // canvas:canvas对象 // initX:绘制字符串起始x坐标 // initY:绘制字符串起始y坐标 // lineH ...

  2. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  3. canvas转图片中的文字自动换行

    概述 最近项目用到了canvas转图片,但是由于canvas对文字排版的支持非常弱,一般我们在canvas上画不同排版的文字(比如竖排文字)都是利用js计算横纵坐标,然后一个字一个字地画出来,今天无意 ...

  4. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  6. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  7. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  8. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. 微信小程序生成海报分享：canvas绘制文字溢出如何换行

    主要思路: 1.先分割为字符串数组,然后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串 2.计算另起的 ...

随机推荐

  1. 新博客地址： kuangbin.org

    RT. 买了新域名,原来的kuangbin.net已经废了,数据已经移动到了kuangbin.org

  2. pip install lxml出错解决

    初学Python各种版本问题,安装pip install lxml各种出错,解决方法:py -2 -m pip install wheel(PY3上我上个帖子已经标了),http://www.lfd. ...

  3. linux crontab

    概念: Linux 工作排程的种类:at, cron at 是个可以处理仅执行一次就结束排程的指令,不过要执行 at 时, 必须要有 atd 这个服务支持. crontab 这个指令所设定的工作将会循 ...

  4. linux 程序管理与SElinux

    此文涉及的命令:&.jobs.fg.bg.kill.nohup.ps.top.pstree.free.uname.uptime.netstat.dmesg.vmstat.fuser.lsof. ...

  5. ————weak 和————block

    Blocks理解: Blocks可以访问局部变量,但是不能修改 如果修改局部变量,需要加__block __block int multiplier = 7; int (^myBlock)(int) ...

  6. 经典的找不到符号（symbol）错误 #iOS开发

    使用BmobSDK的过程中,编译时出现了以下错误信息,意思是 -[BmobSRWebSocket _innerPumpScanner] 这个方法引用了 "_utf8_nextCharSafe ...

  7. 禁止复制放在js文件中

    1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码代码如下: <script language="Javascript"> document.oncont ...

  8. JavaScript基础认知

    此文只适用于初学者,大神们就不要看了,嘿嘿~ 一.定义变量 关键字 var,由此关键字定义变量,例如:var a =21:就把21这个数定义给了变量a 二.基本数据类型 1.Number类型 表示数字 ...

  9. 判断当前VC是不是正在展示的活跃页面

    viewController.isViewLoaded && viewController.view.window

  10. 「脑洞」图片转HTML（支持动画）

    也许是受到很久以前看到的这玩意儿的原因:The Shapes of CSS 现在开脑洞写了个自动转换,顺便支持了动画……嗯,纯 CSS (:з」∠) 主要步骤就是用 Python 读图片,然后把像素全 ...