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. PHP实现CSV大文件数据导入到MYSQL数据库

    <?php $db_host="192.168.1.10"; $db_user="root"; $db_psw="11111"; $d ...

  2. JavaWeb 学习001-登录页面-Servlet

    那什么是Servlet呢? 我理解的Servlet 就是一个中间媒介,jsp页面原本需要一些操作,但是现在让jsp页面只是显示就好,把操作的工程转移给Servlet中. 使用Servlet时候有个固定 ...

  3. Android开发学习---sharedpreference的使用

    在前面文章中,为了使数据回显,使用的技术思路是,首先,将数据持久化写到ROM或者SDCard中,其中name和password以":"分隔;然后,将数据记取出来,再用split方法 ...

  4. Python模块：struct

    各个编程语言都有自己的数据类型,当python需要接受其他语言或者网络传输来交互数据的时候,需要考虑到python的数据类型与其他平台之间交互问题.而python的struct就是解决这个问题的. s ...

  5. 乌邦图ubuntu配置iptables的NAT上网

    cat /etc/network/iptables.up.rules # Generated by iptables-save v1. :: *nat :PREROUTING ACCEPT [:] : ...

  6. java多线程详解(5)-Threadlocal用法

    ThreadLocal是什么 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类可以很简洁 ...

  7. TCP/IP详解系列 --- 概念总结01

    UDP协议  .vs.  TCP协议:  原理上:(TCP报文段. vs . UDP用户数据报) TCP协议的特性: TCP是面向连接的运输层协议,应用程序在使用TCP协议之前,必须先建立TCP连接. ...

  8. Winform打砖块游戏制作step by step第5节---重构代码，利用继承多态

    一 引子 为了让更多的编程初学者,轻松愉快地掌握面向对象的思考方法,对象继承和多态的妙用,故推出此系列随笔,还望大家多多支持. 二 本节内容---重构代码,利用继承多态 1. 主界面截图如下: 2.  ...

  9. 基类用的this指针

    结论:基类构造函数中的this指针指向的是派生类的对象 测试代码: #include <iostream> using namespace std; class father; fathe ...

  10. web测试方法总结

    链接地址:http://www.cnblogs.com/Jessy/p/3539638.html 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~ ...