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. db2 常用函数

    语法:VALUE(EXPRESSION1,EXPRESSION2) VALUE函数是用返回一个非空的值,当其第一个参数非空,直接返回该参数的值,如果第一个参数为空,则返回第一个参数的值. eg: -- ...

  2. Git使用心得

    1.git是分布式的版本控制(有本地仓库)git 先对安全 2.git基于元数据   svn是基于目录的 3.本地的提交分为三个步骤(提交本地仓库先提交暂存区再提交本地仓库) 工作区         ...

  3. 初步涉及JDBC

    一.为什么要使用JDBC: 1.在之前的学习中,我们都是通过控制台来输入信息,创建对象,然后再输出信息,但是这样无法保存数据,每次程序运行都需要重新输入,很麻烦. 2. 在这样的情况下,我们就需要利用 ...

  4. Coursera Machine Learning : Regression 多元回归

    多元回归 回顾一下简单线性回归:一个特征,两个相关系数 实际的应用要比这种情况复杂的多,比如 1.房价和房屋面积并不只是简单的线性关系. 2.影响房价的因素有很多,不仅仅是房屋面积,还包括很多其他因素 ...

  5. 【转】oracle查询用户表,函数,储存过程,

    ◆Oracle查询用户表空间:select * from user_all_tables ◆Oracle查询所有函数和储存过程:select * from user_source ◆Oracle查询所 ...

  6. ORA-12514 TNS:listener does not currently know of service requested in connect descriptor

    this issue and the fix was to make sure in tnsnames.ora the SERVICE_NAME is a valid service name in ...

  7. 1、C语言基本数据类型

    1.分类如图: 2.大小如下 char                        1字节 short                      2字节 int                   ...

  8. iazq更新网址

    [版本:1.1] [介绍:哈哈(ಡωಡ)hiahiahia 新版软件试试去和哥哥刚放学噢噢噢天然呆翡翠城] [链接:http://info.3g.qq.com/g/s?aid=index&g_ ...

  9. [10]APUE：信号

    [a] 常用信号 SIGABRT 调用 abort 函数时产生此信号,进程异常终止 SIGALRM 调用 alarm 或 setitimer 函数超时之后产生 SIGCHLD 子进程终止或 stop ...

  10. Linux添加/删除用户和用户组

    声明:现大部分文章为寻找问题时在网上相互转载,在此博客中做个记录,方便自己也方便有类似问题的朋友,故原出处已不好查到,如有侵权,请发邮件表明文章和原出处地址,我一定在文章中注明.谢谢. 本文总结了Li ...