HTML5キャンバスを使用してテキストを描画する方法-H5 チュートリアル-php.cn

HTML5キャンバスを使用してテキストを描画する方法

不言

リリース： 2020-10-21 09:20:25

オリジナル

6000 人が閲覧しました

HTML5canvas を使用してテキストを描画する方法: まず、対応する HTML サンプルファイルを作成し、次に fillText メソッドを使用してキャンバス上に塗りつぶされたテキストを描画します。

HTML5キャンバスを使用してテキストを描画する方法

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>

ログイン後にコピー

説明:

次のコードは、キャンバスオブジェクトを取得し、コンテクスト。

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);

ログイン後にコピー

実行結果

Webブラウザを使用して上記の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);

ログイン後にコピー

実行結果:

Webブラウザを使用して上記のHTMLファイルを表示します。下の図のような効果が得られ、赤いフォントが描画されます。

HTML5 canvas

以上がHTML5キャンバスを使用してテキストを描画する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。