プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
作ったアプリ紹介

【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要素。
  • テキストも「図として描画」することができる。
  • 描画領域を画像として保存できる。