描画の作法

描画の作法

JavaScriptを使って画像を表示する作法はAndroidのJavaとは違います。

最初に場所を決める
<body></body>内にcanvasで定義します。


<canvas id="canvas" width="800" height="600">

これで800X600の大きさでidが"canvas"のcanvasが定義できました。

HTMLCanvasElement オブジェクトを作成する


var canvas = document.getElementById("canvas");

CanvasRenderingContext2D オブジェクトを取得する


var context = canvas.getContext("2d");

取得したcontextを使って円などの描画をおこないます。body以下の全ソース。


<body>

<canvas id="canvas" width="800" height="600">
キャンバスで描画
</canvas>

<script type="text/javascript">
// ------------------------------------------------------------
// HTMLCanvasElement オブジェクトを作成する
// ------------------------------------------------------------
var canvas = document.getElementById("canvas");

// ------------------------------------------------------------
// CanvasRenderingContext2D オブジェクトを取得する
// -----------------------------------------------------------
var context = canvas.getContext("2d");

//contextを使って描画をする

</script>
</body>