canvas文字怎么换行？canvas文字换行的方法介绍

在canvas中提供了将文本作为图片输出到画布上的功能，通常用到的函数主要有canvas.drawText 和canvas.fillText两个。

以canvas.fillText()函数为例，在canvas.fillText("information" , width , height , maxwidth )中包含四个参数，"information"表示文本输出的内容，width和height分别表示你想要输出的文本起始字符左上角的位置，而maxwidth则表示了该字符串的最大宽度，例如将maxwidth设为100，则无论字符串有多长，都将限制在100像素宽度内。

接下来我们来看一看将canvas文字换行的代码：

!DOCTYPE html>
    html>
    head>
      meta charset="UTF-8">
      tITle>
    canvas自动换行/title>
      style type="text/css">
    * {
      margin: 0    }
    #main {
          width: 400px;
          margin: 20px auto 0;
    }
    #canvas, #editableWarp, #editable, #hideText {
          width: 400px;
          height: 125px;
          padding: 0;
          border: 0;
          background: pink;
          color: blue;
          font-Size: 14px;
          font-family: 'sans-serif';
          position: relative;
      z-index: 1    }
    #hideText {
          z-index: 0;
          position: absolute;
          　word-break: break-word;
          word-wrap: break-word;
    }
    p {
          line-height: 32px;
    }
      /style>
    /head>
    body>
      div id="main">
        p>
          输入：    /p>
        div id="editableWarp">
          div id="hideText">
    /div>
          textarea id="editable" placeholder="请输入文字...">
    /textarea>
        /div>
        p>
          canvas输出：    /p>
        canvas id="canvas" width="400" height="125">
    您的浏览器不支持canvas/canvas>
      /div>
      script type="text/javascript" src="http://apps.bdimg.COM/libs/jquery/2.1.4/jquery.min.js">
    /script>
      script type="text/javascript">
        VAR $canvas = $('#canvas'),        $editable = $('#editable'),        $hideText = $('#hideText'),        ctx = $(canvas)[0].getContext("2d");
    $editable.keyup(function handleEdittable () {
          var txt = $editable.val(),          html = convertText(txt);
          $hideText.html(html);
          drawText();
    }
    );
    function convertText(txt) {
          var html = txt.replace(/(\S)/ig, 'span>
    $1/span>
    ');
          html = html.replace(/\n|\r/ig, 'br>
    ');
          html = html.replace(/\s/ig, ' ');
          return html;
    }
    function drawText () {
          ctx.clearRect(0, 0, $(canvas).width(), $(canvas).height());
          var fontSize = $hideText.css('fontSize');
          ctx.font = fontSize + ' sans-serif';
          ctx.textAlign = 'conter';
          ctx.textBaseline = "top";
          ctx.fillStyle = 'red';
      $.each($("#hideText span"), function (i, item) {
            var pos = $(item).position();
            var txt = $(item).text();
            ctx.fillText(txt, pos.left, pos.top);
      }
    );
    }
      /script>
    /body>
    /html>
    

canvas换行效果如下：

本篇文章到这里就结束了，关于canvas元素更多的知识可以参考HTML5开发手册学习具体内容。

以上就是canvas文字怎么换行？canvas文字换行的方法介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！