「HTML/HTML5」の版間の差分
削除された内容 追加された内容
Semi-Brace (トーク | 投稿記録) M編集の要約なし |
→canvas要素: canvasタグとjavascriptを実際にどう組み合わせるかの例。また、実行結果を追加。また、色変更。黒だと、なんかエラー表示っぽい印象なので、青に変更。 |
||
91 行
[[JavaScript]]を使用するとcanvasに画像を描くことができる。
<syntaxhighlight lang="javascript">
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,
ctx.fillRect(100, 100, 200, 200);
</syntaxhighlight>
JavaScriptは下記のようにcanvasタグと組み合わせて使用できます。
;HTMLでのJavaScriptとcanvasの組み合わせの例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なページ</title>
</head>
<body>
<canvas id="canvas" width="320" height="240">
</canvas>
<script>
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,200)";
ctx.fillRect(100, 100, 200, 200);
</script>
</body>
</html>
</syntaxhighlight>
なお、このコードは、実行するとブラウザ画面に青い長方形を描きます。
ctx.fillRect(100, 100, 200, 200);
の書式は、上記htmlコード例の設定なら、
ctx.fillRect(始点x座標, 始点y座標, 横幅, 縦幅);
です。（第3引数と第4引数は、終点の座標位置ではないので、混同しないように注意しましょう。）
== ページ内がいくつかの文書に分割される場合 ==
| |||