HTMLのcanvasタグで何ができるのか、遊んでみました。
「Canvasって何ですか？どんなことができるんですか？」という質問に答えます。
Canvasは、HTMLのタグのひとつで「ブラウザ上に図を描画」することができるもの。
このような画像を描画できます。
スポンサーリンク
Canvasとは
- canvasとは、ブラウザ上に図を描画するのに使うHTMLのタグ。
- 描画した図は右クリックで保存ができる。
- widthやheightでサイズ指定できる。
- canvasに対応していないブラウザもあるので「代替コンテンツ」も入れる。
- 代替コンテンツはpやimgなどが使える。
Canvasを作る流れ
- まず、HTMLで「canvas」タグを作って。
- 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要素。
- テキストも「図として描画」することができる。
- 描画領域を画像として保存できる。
スポンサーリンク
