HTML

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

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

 

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

 

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

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

 

目次
  1. Canvasとは
  2. Canvasを作る流れ
  3. さまざまな図を描画する
  4. テキストを描画する
  5. Canvasのまとめ

Canvasとは

  • canvasは、ブラウザに図を描画するために使うタグ
  • 自由にサイズを指定できる
  • 描画した図は画像として保存できる

 

Canvasを作る流れ

  1. canvasタグを記述する
  2. JavaScriptでプログラムを書く

この流れで作ります。

 

①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でcanvas要素を取得
  • コンテキストを取得
  • 描画
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要素
  • 文字を「図として描画」できる
  • 描画した図は画像として保存できる
関連記事