HTML5を使う場合、ファイルの先頭にDOCTYPE宣言を含めなければなりません。このDOCTYPE宣言は以下のようにとてもシンプルです。
<!DOCTYPE html>
たったこれだけです！
これで、HTML5が使えるようになります。
2011年09月13日
HTML5のDOCTYPE(ドキュメントタイプ)宣言
言語:HTML5
HTML5を使う場合、ファイルの先頭にDOCTYPE宣言を含めなければなりません。このDOCTYPE宣言は以下のようにとてもシンプルです。
たったこれだけです！
これで、HTML5が使えるようになります。
HTML5を使う場合、ファイルの先頭にDOCTYPE宣言を含めなければなりません。このDOCTYPE宣言は以下のようにとてもシンプルです。
たったこれだけです！
これで、HTML5が使えるようになります。
-
- | HTML5
-
- 0 Comment |
- 0 Trackback |
-
2011年09月06日
HTML5のcanvasで文字列を描画
言語:HTML5, JavaScript
ブラウザ:Firefox 6.0.1
HTML5にはcanvas要素というものがあります。これは、グラフィックスのための領域です。
使い方は簡単で、canvasタグを記述して、JavaScriptでその要素に描画するコードを書くだけです。
具体的な流れとしては
- canvasタグの要素を取得
- canvasタグの要素からgetContextで描画コンテキストを取得
- 描画コンテキストに対してfillTextで文字列を描画
以下はcanvasタグ内に「こんにちは」と描画する場合のサンプルです。
<!DOCTYPE html>
<html>
<head>
<title>canvas>/title>
<script type="text/javascript">
<!--
window.onload = function() {
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillText("こんにちは", 10, 10);
}
-->
</script>
</head>
<body>
<canvas id="canvas1" width="100" height="100"></canvas>
</body>
</html>
getElementByIdでcanvasの要素を取得して、getContextで描画対象のコンテキストを取得します。<html>
<head>
<title>canvas>/title>
<script type="text/javascript">
<!--
window.onload = function() {
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.fillText("こんにちは", 10, 10);
}
-->
</script>
</head>
<body>
<canvas id="canvas1" width="100" height="100"></canvas>
</body>
</html>
文字列の描画はこのcanvasオブジェクトに対して行います。
文字列を描画するメソッドはfillTextで、このメソッドに文字列を位置を指定します。
上のサンプルは以下のように表示されます。
-
- | HTML5/ JavaScript
-
- 0 Comment |
- 0 Trackback |
-
