怎么實(shí)現(xiàn)canvas文字換行

發(fā)布時(shí)間：2020-07-11 14:53:00 來源：億速云閱讀：231 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)怎么實(shí)現(xiàn)canvas文字換行，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

在canvas中提供了將文本作為圖片輸出到畫布上的功能，通常用到的函數(shù)主要有canvas.drawText 和canvas.fillText兩個。

以canvas.fillText()函數(shù)為例，在canvas.fillText("information" , width , height , maxwidth )中包含四個參數(shù)，"information"表示文本輸出的內(nèi)容，width和height分別表示你想要輸出的文本起始字符左上角的位置，而maxwidth則表示了該字符串的最大寬度，例如將maxwidth設(shè)為100，則無論字符串有多長，都將限制在100像素寬度內(nèi)。

接下來我們來看一看將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換行效果如下：

怎么實(shí)現(xiàn)canvas文字換行

以上就是怎么實(shí)現(xiàn)canvas文字換行，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么實(shí)現(xiàn)canvas文字換行

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽