HTML5での図形描画はcanvasというものを使います
最初のひな形を基に、四角を描画するコードを書いてみます
間違っていると描画されませんので、適当にデバッグログを入れてfirefoxのコンソールで確認しながら進めます
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Canvas01 </title>
</head>
<body onload="draw('canvas');">
<H1> Canvasによる矩形の描画 </H1>
<canvas id="canvas" width="400" height="300" />
<script>
function draw(id){
console.log("ondraw : " + id);
var canvas = document.getElementById(id);
if( canvas == null ){
conslole.log("ぬるぽ");
return;
}
var context = canvas.getContext('2d');
context.fillStyle = "#FF0000"; // 赤100%
context.fillRect(0, 0, 400, 300); // 描画
}
</script>
</body>
</html>
canvasを使用する手順としては、まずHTML側では
1. body内にcanvasタグをつける
idとサイズを記載する
2. scriptタグ内にcanvasに描画するjavascriptの関数を追加
今回は"draw"という関数を用意しました
3. 関数の呼び出し用のイベントを追加
今回はbodyがloadされたら関数drawを描画させる為に
<body onload="draw('canvas');">
としています
javascript側の処理は
1. document.getElementByIdで引数(今回はid:canvas)から"要素"を取得
( DOMオブジェクトと記載しているページもありますね)
var canvas = document.getElementById(id);
の部分です
2. このオブジェクト(要素・DOMオブジェクト)がnullだったら処理をしないのがお作法なので
nullチェックを行います
3. DOMオブジェクトからグラフィックコンテキストを取得
ここの引数が2dとなっていますが、現在は2dしか無い模様です
このcontextに対して描画の操作を行っていきます
4. 塗りつぶし処理
グラフィックコンテキストに対して塗りつぶしメソッドを実行します
今回はfillで塗りつぶしていますが、輪郭を描くstrokeというものも存在するようです
context.fillStyle = "#FF0000"; // 赤100%
RGB値でfillStyleプロパティ （色)を設定
"red"というように定義済のものを指定可能
rgbaの記載もできる模様
context.fillRect(0, 0, 400, 300);
描画。引数はrectのサイズ
とりあえずこんな感じで図形が描画できました
0 件のコメント:
コメントを投稿