如何使用HTML5 canvas繪製文字-H5教程-PHP中文網

如何使用HTML5 canvas繪製文字

不言

發布： 2020-10-21 09:20:25

原創

5969 人瀏覽過

使用HTML5canvas繪製文字的方法：先建立對應的HTML範例檔案；然後透過fillText方法實作在畫布上繪製填色的文字即可。

如何使用HTML5 canvas繪製文字

如果要使用HTML5 Canvas繪製文字，那麼就需要使用到畫布上下文的fillText()方法。下面我們來看具體的內容。

HTML5 canvas

我們先來看具體的範例

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8"/>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

登入後複製

說明：

下面的程式碼是取得canvas物件並取得上下文。

var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
  if ( ! canvas || ! canvas.getContext ) {
    return false;
  }
  var context = canvas.getContext(&#39;2d&#39;);

登入後複製

下面是繪製字元的程式碼。指定要在font屬性中繪製的字元的字體資訊。使用fillText（）方法在畫布上繪製一個字串。作為第一個參數繪製的字串，繪圖開始的X座標和Y座標被賦予第二個和第三個參數。

context.font = &#39;normal 18pt "楷体"&#39;;
context.fillText(&#39;Hello HTML Canvas World!&#39;, 60, 200);

登入後複製

執行結果

使用網頁瀏覽器顯示上述HTML檔案。獲得下圖的顯示結果。

HTML5 canvas

接下來我們來看如何更改文字的顏色

程式碼如下

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.font = &#39;normal 18pt "楷体"&#39;;
    context.fillStyle = &#39;red&#39;;
    context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="360" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

登入後複製

說明：

更改文本顏色，需要設定fillStyle屬性為文字顏色。

 context.font = &#39;normal 18pt "楷体"&#39;;
 context.fillStyle = &#39;red&#39;;
 context.fillText(&#39;你好，PHP中文网！！！&#39;, 60, 200);

登入後複製

運行結果：

使用網頁瀏覽器顯示上述HTML檔案。將獲得如下圖所示的效果，已繪製了紅色的字體。

HTML5 canvas

以上是如何使用HTML5 canvas繪製文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

如何使用HTML5 canvas繪製文字