canvas文字怎麼換行？ canvas文字換行的方法介紹-H5教程-PHP中文網

首頁

web前端

H5教程

canvas文字怎麼換行？ canvas文字換行的方法介紹

不言

Sep 26, 2018 pm 02:01 PM

canvas

html5中的canvas是用于绘制图形的，可以通过 JavaScript 来控制它绘制各种文本和图像，但是在使用 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: &#39;sans-serif&#39;;
      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 = $(&#39;#canvas&#39;),
        $editable = $(&#39;#editable&#39;),
        $hideText = $(&#39;#hideText&#39;),
        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, &#39;<span>$1</span>&#39;);
      html = html.replace(/\n|\r/ig, &#39;<br>&#39;);
      html = html.replace(/\s/ig, &#39; &#39;);
      return html;
    }
    function drawText () {
      ctx.clearRect(0, 0, $(canvas).width(), $(canvas).height());
      var fontSize = $hideText.css(&#39;fontSize&#39;);
      ctx.font = fontSize + &#39; sans-serif&#39;;
      ctx.textAlign = &#39;conter&#39;;
      ctx.textBaseline = "top";
      ctx.fillStyle = &#39;red&#39;;
      $.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文字怎麼換行？ canvas文字換行的方法介紹

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

以上是canvas文字怎麼換行？ canvas文字換行的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。