日曜エンジニアのIT道場
ITを学び、DXに備える
    HTML&CSS

    【HTML】Canvasタグで遊んでみた。

    HTMLcanvasタグで何ができるのか、遊んでみました。

     

    Canvasって何ですか?どんなことができるんですか?」という質問に答えます。

     

    Canvasは、HTMLのタグのひとつで「ブラウザ上に図を描画」することができるもの。

    このような画像を描画できます。

     

    Canvasとは

    • canvasとは、ブラウザ上に図を描画するのに使うHTMLのタグ。
    • 描画した図は右クリックで保存ができる。
    • widthやheightでサイズ指定できる。
    • canvasに対応していないブラウザもあるので「代替コンテンツ」も入れる。
    • 代替コンテンツはpやimgなどが使える。

     

    Canvasを作る流れ

    1. まず、HTMLで「canvas」タグを作って。
    2. JavaScriptで描画のプログラムを書く。

    という流れで作っていきます。

     

    ①HTMLでCanvasタグを書く

    • canvasタグには「id」をつけておきます。
    • widthとheightでサイズをしていできます。
    • style=”border” で 枠線がつけられます。
    • Canvasに対応していないブラウザもあるので、Canvasタグの内側に「代替コンテンツ」を書いておきます。
    <canvas id="can1" width="600" height="400" style="border: 1px solid blue;">

    <p>canvasに対応していないブラウザ用の代替コンテンツ</p>
    </canvas>

     

    ②JavaScriptで描画のプログラムを書く

    HTMLが用意できたら、次にJavaScriptです。

    • idで取得して。
    • コンテキストを取得して。
    • 描画します。
    var canvas = document.getElementById("can1"); //キャンバスのオブジェクトを取得する。
    var context = canvas.getContext("2d"); //キャンバスのコンテキストを取得する。context.fillRect(100,200,200,100); //描画する。

     

    fillRectは四角形を描画する命令文です。

    描画する位置と描画するサイズを指定できます。

     

    図を描画する

    図を描画する方法がいくつかあるのです紹介します。

    ①四角形を描画する

    strokeRect関数(x座標,y座標,幅,高さ)

    context.strokeRect(200,300,200,100);

     

     

    ②塗りつぶしの四角形を描画する

    fillRect関数(x座標,y座標,幅,高さ)

    context.fillRect(100,200,200,100);

     

     

    ③塗りつぶし部分を消す

    clearRect関数(x座標,y座標,幅,高さ)

    context.clearRect(230,330,200,100);

     

     

    テキストを描画する

    テキストも描画できます。

     

    var ctx = document.getElementById("can2").getContext("2d");
    

var txt ="JavaScript"; //描画する文字


    ctx.font = "italic 40px Arial"; //フォントにArial,40px,斜体を指定
    
ctx.fillStyle = "green"; //塗り潰し色を緑に


    ctx.fillText(txt,10,50); //テキストを塗り潰しで描画

    ctx.fillText(txt,10,100,100); //テキストの最大幅を100pxに指定
    

ctx.strokeStyle = "red"; //輪郭線の色を青に


    ctx.strokeText(txt,10,150); //テキスト輪郭を描画

    ctx.strokeText(txt,10,200,100); //テキストの最大幅を100pxに指定

     

    Canvasのまとめ

    • Canvasは、図を描画するためのHTML要素。
    • テキストも「図として描画」することができる。
    • 描画領域を画像として保存できる。