JavaScriptでcanvasにテキストを描画するプログラムを解説

2020年6月10日システムcanvas,JavaScript,プログラムコード

【初心者】JavaScriptでcanvasにテキストを描画するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptでcanvasにテキストを描画するプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScriptでcanvasタグへテキストを描画するプログラミングを解説します。今回のプログラミングにおいて「canvasチュートリアル」を参考に実装しました。

canvasへ図形を描画する「JavaScriptでcanvasに図形を描画するプログラミングを解説」もぜひご覧ください。

JavaScriptでcanvasにテキストを描画するプログラミングのサンプルコード

JavaScriptでcanvasタグへテキストを描画するプログラミングコードのサンプルコードです。

<html>
<head>
    <meta charset="utf-8">
    <title>Canvas Text Sample</title>
</head>
<body>
    <h1>Canvas Text Sample</h1>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
                ctx.font = "30px serif";
                ctx.fillStyle = "blue";
                ctx.fillText('Canvas', 10, 30);
                ctx.font = "30px 'MS ゴシック'";
                ctx.strokeStyle = "green";
                ctx.strokeText('Text', 10 + (30/2 * (6 + 1)), 30 + 30);
                ctx.font = "30px serif";
                ctx.fillStyle = "red";
                ctx.fillText('Sample', 10 + (30/2 * (6 + 1)) + (30/2 * (4 + 1)), 30 + 30 + 30);
        }
    </script>
</body>
</html>

JavaScriptでcanvasにテキストを描画するプログラミングを解説

JavaScriptでcanvasタグへテキストを描画するプログラミングの解説です。

HTML部分

HTML部分の解説です。

文字コードを指定

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

canvasタグを用意

canvasタグを用意します。このcanvasタグへJavaScriptでテキストを描画します。

<canvas id="canvas"></canvas>
canvasとは

HTML5のcanvas要素は、JavaScriptで図形などを描画することが出来る領域です。

JavaScript部分

JavaScript部分の解説です。

canvasへテキストを描画

canvasタグのエレメントを取得します。

var canvas = document.getElementById('canvas');

canvasタグへテキストを描画します。

var ctx = canvas.getContext('2d');
    ctx.font = "30px serif";
    ctx.fillStyle = "blue";
    ctx.fillText('Canvas', 10, 30);
    ctx.font = "30px 'MS ゴシック'";
    ctx.strokeStyle = "green";
    ctx.strokeText('Text', 10 + (30/2 * (6 + 1)), 30 + 30);
    ctx.font = "30px serif";
    ctx.fillStyle = "red";
    ctx.fillText('Sample', 10 + (30/2 * (6 + 1)) + (30/2 * (4 + 1)), 30 + 30 + 30);
canvas関係のメソッド
  • getContext('2d’)
    • 線や円などを描画するメソッドを持っている組み込みオブジェクトを取得。
  • font
    • フォントのスタイル・サイズ・種類を指定。
  • fillStyle
    • 塗りつぶしの色やスタイルを指定。
  • fillText(text, x, y, maxWidth)
    • 塗りつぶしのテキストを指定座標に描画。
  • strokeStyle
    • 線や輪郭の色やスタイルを指定。
  • strokeText(text, x, y, maxWidth)
    • 輪郭のテキストを指定座標に描画。

おわり

今回はcanvasタグへテキストを描画するプログラミングコードを解説しました。

\今なら/Amazonギフト券チャージでポイントが貯まる

Amazonチャージでギフト券をチャージするとお得
Amazonチャージでギフト券をチャージするとポイントが貯まる

Amazonチャージでギフト券をチャージしておくとポイントが貯まるのでめっちゃお得です。

UT

Amazonを利用している人ならお得な情報です。

Amazonチャージとは

Amazonギフト券を事前にチャージしておけるサービスです。特典としてチャージする度にポイントが付与されるのでお得です!

  • 5,000円以上:0.5%
  • 20,000円以上:1%
  • 40,000円以上:1.5%
  • 90,000円以上:2%

※Amazonギフト券の有効期限は10年間と長いので、9万円チャージしたとしても1年に9,000円以上使うのであれば無理なく使い切れます。

リンク:Amazonチャージはこちらから。

クレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中
クレジットカードチャージで0.5%ポイントが貯まる

さらにAmazonプライム会員ならクレジットカードでチャージすると0.5%ポイントが貯まるキャンペーンが開催中です。

UT

以下のリンクからキャンペーンにエントリーする必要があるので注意が必要です。

リンク:Amazonチャージのキャンペーンエントリーはこちらから。

ブラックフライデー連動のスタンプラリー

ブラックフライデー連動のスタンプラリー
ブラックフライデー連動のスタンプラリー

Amazonでは、2021年12月17日までにスタンプを5つ集めると「10人に1人最大50,000~500ポイント」が当たるチャンス!なスタンプラリーが開催しています。

  • ポイントアップキャンペーンにエントリーする
  • Amazonプライム配送特典の対象商品を購入する
  • Prime Videoを観る
  • Amazon Music Primeを聴く
  • Prime Readingの本を読む
UT

スタンプの1つである「ポイントアップキャンペーン」へのエントリーは、2021年12月02日23時59分までに完了する必要があります。

リンク:Amazonプライムスタンプラリーはこちらから。

UT
UTの日常

1985年生まれ1児の父親です。ブログとか副業で収入を得る手段を模索中であります。(無理しない程度が理想wだから実績が出ないorz)
UTのプロフィール
Amazon欲しいものリスト

2020年6月10日システムcanvas,JavaScript,プログラムコード

Posted by UT