HTML5のcanvasを使ってAndroidアプリ！描画練習① - プログラミングで飯を食え。腕をあげたきゃ備忘録！

サクウェブＴＶはコチラ↓↓↓

こんにちは。

今回は、HTML5のcanvasの練習も兼ねて、簡単な描画を練習してみようと思います。

どうせなら前回までやっていたjsWaffleでAndroidアプリ化してみようかと思います。

を参考にして、jsWaffleでの開発環境を作ってください。

canvasはHTML5に新しく追加された要素で、JavaScriptを使用することで動的に図形を描画したり、画像を読み込んで操作したりできます。

まずHTML内にHTML5であることを明示します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>canvasテスト</title>
    </head>
　　<body>

    </body>
</html>

そしてbodyタグ内にcanvasタグを記述します。

<canvas id="draw_space" width="300" height="300"></canvas>

id属性は後で、JavaScriptから操作するために指定してあります。

width属性とheight属性でcanvasの縦横幅を指定します。（単位はピクセル）

canvasの操作はJavaScriptから操作します。しかし、JavaScriptから操作するためにはそれ専用のオブジェクトを生成する必要があります。

そのために使用するメソッドがgetContext()です。以下のように使用します。

var canvas = document.getElementById("draw_space");
var c = canvas.getContext("2d");

まずは、変数canvasにcanvasのエレメントを代入し、そこにgetContext()を適用することで描画のためのオブジェクトを生成します。

生成したオブジェクトは変数cに代入してあるため、cに対して様々なメソッドを適用していくことになります。

実際の使い方は話を進めながら説明します。