HTMLのcanvasタグで描画処理を学ぼう!基本的な使い方を初心者向けに徹底解説!
  • facebookページ
  • twitterページ
  • 2020.02.14

    HTMLのcanvasタグで描画処理を学ぼう!基本的な使い方を初心者向けに徹底解説!

    HTMLで図形などを描画したい場合、「canvas」タグを土台として、Javascripで描画する方法がHTML5より利用出来るようになりました。

    従来はFlashなどのプラグインを利用して図形を描画する必要がありましたが、HTML5からは「canvas」タグで描画処理を行うことが可能となっています。

    本記事では、初心者向けにHTML5より利用可能となった「canvas」タグの基本的な使い方をご紹介していきたいと思います。

    HTML5でcanvasタグを利用する基礎知識


    HTML5でcanvasタグを利用する上で「HTML」と「Javascript」の両方の知識が必要となります。

    HTML5で図形を描画するためのコンテナを用意する

    図形を描画するためには、キャンパスとなる領域を指定してあげる必要があります。

    領域を指定する役目となるのがHTML5より追加された「canvas」タグとなります。

    上記のように基本的には「id」属性とセットで利用します。

    Javascriptでどの「canvas」タグに描画するのかを指定するために利用するためです。

    実際に描画処理を記述するのはJavascript

    実際に図形の描画処理を記述するのはJavascriptで記述することになります。

    JavascriptではHTMLで指定した「canvas」タグのidを取得し、「getContext」メソッドを利用して描画処理を行います。

    上記の例では、idを「sample」と設定した「canvas」要素に対して「2D」で描画処理を行うことが宣言されています。

    HTML5のcanvasタグでテキストを表示してみよう


    HTML5のcanvasタグを利用してまずは「テキスト」を表示するサンプルをご紹介していきたいと思います。

    canvasタグにテキストを描画する際、使用するメソッドは「fillText」と「strokeText」の2種類から選択することが可能です。

    一般的なテキスト形式

    一般的なテキスト形式を描画したい場合、「fillText」メソッドを利用することで実現可能です。

    fillTextメソッドでは、第一引数に「表示したいテキスト」、第二引数に「canvasへ表示する位置X軸」、第三引数に「canvasへ表示する位置Y軸」を指定します。

    fillTextメソッドのサンプルコードを確認しよう

    実際のサンプルコードを下記にご紹介します。

    index.html

    ポテパンダの一言メモ

    以降のサンプルコードでも上述したHTMLを使用します。

    canvas.js

    実行した結果が下記のキャプチャとなります。

    ポテパンダの一言メモ

    サンプルではキャプチャとして分かりやすいように「context.font」で文字のサイズとフォントを調整しています。

    テキストの輪郭のみを描画

    次に塗りつぶし無しの輪郭のみのテキストを描画してみましょう。

    「strokeText」メソッドを利用することで実現可能です。

    引数は前述した「fillText」メソッドと同じです。

    第一引数に表示したいテキストを設定し、第二引数・第三引数で表示位置を決定します。

    strokeTextのサンプルコードを確認しよう

    strokeTextメソッドについてもサンプルコードで確認していきましょう。

    canvas.js

    基本的な処理内容は「fillText」メソッドと同じで今回はX軸とY軸に指定する値を変更しています。

    実行した結果が下記のキャプチャとなります。

    指定したテキストの輪郭だけで描画されているのがご確認頂けます。

    また、X軸とY軸の指定を変更したことによりテキストの表示位置が変更されていることにも注目しておきましょう。

    HTML5のcanvasタグで図形を描画してみよう


    次にHTML5のcanvasタグを利用して、図形を描画する処理をご紹介したいと思います。

    canvasタグでは「矩形」と「パス(複数の点を線で結ぶ)」2つの考え方がサポートされています。

    矩形を描画してみよう

    まず矩形に関してですが、「fillRect」「strokeRect」「clearRect」の3種類のメソッドが用意されています。

    • fillRect:塗りつぶしの矩形
    • strokeRect:輪郭だけの矩形
    • clearRect:透明(デフォルト)塗りつぶしの矩形

    引数に関しては全てのメソッドが同じとなり、第一引数と第二引数で指定した位置から第三引数と第四引数で指定したサイズになるように矩形が表示されます。

    サンプルコードで確認してみよう

    上記の基本的な使い方を踏まえた上で、実際のサンプルコードで確認してみましょう。

    canvas.js

    実際に実行した結果が下記のキャプチャです。

    左下の矩形では、「fillRect」メソッドで作成した塗りつぶしの矩形の中に、「clearRect」で小さいサイズの透明矩形を作成し、くり抜いたように見せています。

    パスで図形を描画してみよう

    パスで図形を描画するには、開始位置となるポイントを決め、ポイントの位置をズラして線を結び図形を作成していきます。

    利用する順番は「beginPath()→moveTo()→lineTo()→fill()」 または「beginPath()→moveTo()→lineTo()→clothPath()→stroke()」で利用します。

    fill()を最後に記述する場合は、clothPath()を記述しなくても自動的に線が閉じられ塗りつぶしが行われます。

    一方、stroke()を最後に記述する場合、clothPath()でしっかりと閉じる処理を実施しておく必要があります。

    サンプルコードで確認してみよう

    パスでシンプルな三角形を描画するコードを紹介したいと思います。

    canvas.js

    実際に実行した結果が下記のキャプチャとなります。

    さいごに:HTML5からcanvasタグで簡単に行えるようになった描画処理の基本を理解しておこう


    本記事では、HTML5から利用出来る「canvas」タグの使い方について、サンプルコードを交えながらご紹介してきました。

    今回紹介した内容は基本的な部分のみとなっており、「canvas」タグで利用出来るメソッドにはたくさんの種類が用意されています。

    様々なメソッドを応用することで、複雑な描画処理も実現可能となりますので、興味のある方は更に深く「canvas」タグについて調べてみてください。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料25万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE