CanvasをJavaScriptで操作する方法
こんにちは、いちいちです。
今回は、CanvasをJavaScriptで操作する方法について説明します。
まずHTMLを書こう
HTMLファイルに、以下のコードをコピー＆ペーストしてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>canvas</title>
<body>
<canvas id="orecanvas" class="mycanvas"></canvas>
</body>
</html>
上から7行目が、Canvasの要素です。
これを今からJavaScriptで操作します。
Canvas要素を取得
Canvasの要素を、まず取得します。
取得する方法は、3種類あります。
タグの名前(canvas)を使う
タグの名前を使って取得することができます。
a = getElementsByTagName("canvas")[0];
とやると、変数aに、canvasの要素が入れられます。
が、ここで注意！
getElementsByTagName はいくつもCanvasがある場合があるので、結果は配列になります。
なので、最初にあるCanvasを取得するときは、
getElementsByTagName("canvas")ではなく、
getElementsByTagName("canvas")[0] とします。
配列の仕組みで、最初は[0]です。
クラスを使う
Canvasの要素の中に、 class="canvas" というのが書いてありますよね。
これが、クラスです。
b = getElementsByClassName("mycanvas")[0];
と書くと、変数bに、クラスがmycanvasのものが入ります。
こちらも、結果は配列なので、最後に[0]をつけましょう。
IDを使う
一番おすすめな方法です。
Canvasの要素の中の、 id="orecanvas" という記述が、idです
c = getElementById("orecanvas");
と書くと、取得できます。
HTMLのきまりで、Idは1つまでなので、最後に[0]を付ける必要がありません。
また、getElementsではなく、ひとつなのでgetElementです。
間違えないようにしましょう。
コンテキストを取得する
コンテキストを取得すると、やっと図形・画像、文字を描けます。
これは簡単で、
さっき取得したものを入れた変数の中に、 .getContext("2d") とつければいいです。
変数aに、先程の要素が入っているとすると、
context = a.getContext("2d");
とやると、変数contextにキャンバスのコンテキスト(図形や画像・文字を表示するためのもの)が代入されます。
まとめ
タグ Class id を使って要素を取得したあと、取得した要素に対して、「getContext("2d")」とやると、キャンバスのコンテキストが取得できます。
ctx = getElementById("orecanvas").getContext("2d");
と、1行で書くこともできます。
最後まで見ていただき、ありがとうございました。
JavaScriptでゲームを作れるCanvasってなに？
こんにちは、いちいちです。
JavaScriptで、ゲームを作るのに必要なCanvasとはなにかを説明します。
Canvasとは
HTML5 で追加された要素の一つです(ここらへんは気にしなくていいです)。
<canvas></canvas>とかくと、Canvasが作られます。
Canvasで出来ること
Canvasを使うと、図形や文字、画像を表示することができます。
キャラクターなどが動くゲームを作るのには、ほとんどの場合canvasを使います。
Canvasのメリット
flash と違い、プラグインをインストールしなくても動かすことができます。
また、図形などを細かく描くことができます。
Canvasのデメリット
ブラウザ(これを見るために使っているソフト Chromeなど)が古かったり、Internet Explorer というブラウザを使っていたりすると、表示できないことがあります。
また、細かく表示するので、サイズが大きいと動くのが遅くなることがあります。
まとめ
- 図形や文字、画像を描画できる
- ブラウザさえあれば動かせる
- 古いブラウザでは動かない
- 重くなる(動くのが遅くなる)ことがある
ブラウザ上で動くゲームは、Canvasを使って作るのが主流になっています。
ぜひCanvasを使ってゲームを作ってみてください！
最後まで見ていただき、ありがとうございました。
