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. windows下安装composer抛出Composer\Downloader\TransportException异常解决办法

    1. 把默认的 secure-http 改成false composer config -g secure-http false 2. 修改配置文件 #修改全局文件(推荐) composer conf ...

  2. 利用Native Client OLEDB 11 高效率地对SQL SERVER 进行查询和插入操作

    前言: 鄙司原始用的都是ADO来访问数据库,而我现在着手的项目是从我的GPS历史数据库中,取出历时数据的一个接口,一个DLL.用ADO写完之后,测试下来,平均4000条的数据,需要 180 毫秒左右. ...

  3. JSP中的 HttpSession、pageContext对象

    pageContext 隐含对象对应javax.servlet.jsp.PageContext,都自动的被加入至pageContext中, 您可以由它来取得与JSP相关的对应之Servlet对象,像是 ...

  4. font-family 字体

    宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 ...

  5. ajaxSubmit

    $('button').on('click', function() {    $('form').on('submit', function() {        var title = $('in ...

  6. 一份不错的vue.js基础笔记！！！！

    第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...

  7. 微信web开发者工具初探

    最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同 ...

  8. 简单的XML操作类

    /// <summary> /// XmlHelper 的摘要说明. /// xml操作类 /// </summary> public class XmlHelper { pr ...

  9. 抽象工厂模式 shiyanlou

    二.什么是 抽象工厂模式 抽象工厂模式(Abstract Factory Pattern)是一种软件开发设计模式.抽象工厂模式提供了一种方式,可以将一组具有同一主题的单独的工厂封装起来.如果比较抽象工 ...

  10. Spring Boot项目的打包和部署

    补充一点:搜索了下别人Spring Boot部署方案,大多都说:①packaging设为war:②要添加Spring Boot的tomcat依赖:③修改output路径,但是使用STS新建Spring ...