まずbody内の適当な位置に<canvas id ="canvas"><canvas>を置いてください。idは任意で構いませんが、ネット上にある作品を見てもcanvasを使われることが一般的です(特に作為的な意味はないです)
さて次に、JavascriptでcanvasをDOMで読み込みます。ここではdocument.getElementByIdを使いますので先ほど名づけたidを呼び込みます。
ここで注意点としてはjavascriptをhtml内に書き込む場合は必ず<script>を書き込む位置はcanvasタグの後にしてください。htmlは頭から読まれますから、document.getElementByIdをcanvasの前に置くとidを認識していないのでそれに対する操作ができず、エラーがでます。例えばChromeの開発ツールでは"Uncaught TypeError: Cannot call method 'getContext' of undefined"と出ます。確実にエラーをなくすために、window.onload = の後の関数内で呼び出すとなおよいです。
また、外部ファイルでも先にjavascriptが作動すると同じエラーが出ますので、bodyが読み込まれてからjavascript内のgetElementByIdを呼び出すように<body onload=init();>などとしましょう(当然init出なくとも適当に関数名を決められます。)
さて、canvasを読み込んだところでgetContext("2d")オブジェクトを適当な変数名(以下ではctx)で呼び出します。このオブジェクト内に、描画の命令を出すメソッドが詰まっていると考えていいです。
つまりvar ctx = canvas.getContext("2d"); はvar date = new Date();のような紋切り型の宣言と同じように、あまりよく考えず形式的に書くだけでOKです。
<body>
<canvas id ="canvas"></canvas>
<script>
function init(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
}
window.onload = init();
</script>
</body>
canvas.widthはcanvasの水平方向(javascriptではx軸の向きと表現される)
canvas.heightはcanvasの鉛直方向(javascriptではy軸の向きと表現される)のサイズです。
皆さんの任意でサイズを決められます。
これでbody要素がcanvas内にできましたが、色がないので、何も変わったようには見えないかもしれません。そこでcanvasのあとに<p>a</p>を書き込んでチェックしましょう。やたらと下のほうにaが表示されますね。上にcanvasがあって、その部位を占めているということです。わかりにくければ以下のようにhtmlを書き込んでください。いずれ説明しますが、fillStyleは画面を塗りつぶす操作です。
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.fillStyle = 'black';
ctx.rect(0, 0, 320, 320);
ctx.fill();
}
黒の画面が出ましたね。これがcanvasです。次回からcanvas内への描画をレクチャーしていきます。
0 件のコメント:
コメントを投稿