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. [OC笔记] protocol之我的见解

    OC中的protocol就是和JAVA中interface差不多的东西,但是又不是完全一样的.这个protocol常用来实现委托,也就是自己不实现,当事件产生的时候去回调委托者. 让委托者去执行响应的 ...

  2. 防止多次领取红包进行ID锁

    //controller里面使用锁 ActivityRedPacket ap = customerService.getActivityRedPacket(params);    if (synchr ...

  3. js- this

    this对象是基于函数在执行的环境绑定的. (一)   this 在闭包环境中指向的对象. <Js高级程序设计>中提到: 每个函数在被调用时,其活动对象都会自动取得两个特殊变量:this和 ...

  4. js之字符串操作

    1.字符串查找 var str = "source_content10"; if(str.indexOf("source_content") !== false ...

  5. Chrome 自动填充的表单是淡黄色的背景，有方法自定义吗

    input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }

  6. Java内存分配及变量存储位置实例讲解

    Java内存分配与管理是Java的核心技术之一,之前我们曾介绍过Java的内存管理与内存泄露以及Java垃圾回收方面的知识,今天我们再次深入Java核心,详细介绍一下Java在内存分配方面的知识.一般 ...

  7. 关于MySQL的CRUD操作

    一.清除mysql表中数据 delete from 表名; truncate table 表名; 不带where参数的delete语句可以删除mysql表中所有内容,使用truncate table也 ...

  8. Linux cp命令使用说明

    Linux cp命令使用说明 --功能说明:复制目录或文件 --命令格式:cp  [参数]  <文件或目录>  <文件或目录> --常用参数: -R 复制目录 -i 覆盖文件之 ...

  9. github简单使用教程

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.对于一般人来说公共仓库就已经足够了,而且我们也没多少代码来管理,O(∩_∩)O ...

  10. 关于swap

    一个小小的swap确出现了好多个版本.不断的优化,不断的发现问题: 版本一: function swap(a,b){ var temp = a; a = b; b = temp; } 这个版本对于数组 ...