HTML5 / 03. Canvas

いきなりCanvasか〜、楽しそうな機能が先に紹介されてますな。
まずは下準備。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>03. Canvas</title>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="320" height="240"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// ココにイロイロ書いていくよ
context.stroke();
</script>
</body>
</html>

四角に塗りつぶす。Reference

1
context.fillRect(x, y, w, h);

テキストを書く。Reference

1
context.fillText(text, x, y [, maxWidth ] );

線を引く。Reference
画面から出てもクリッピング(スクリーンの中だけ描画)されますね。

1
2
3
4
context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.closePath();

四角を描く(塗りつぶしなし)Reference

1
context.rect(x, y, w, h);

03. Canvas
うーん、なんかすごく昔にやったOpenGLとかを思い出します。

Error: Suspended

この本を読みながら勉強中

HTML5 / 02. 文書構造

<div id=”header”>, <div id=”footer”> とかみんなが使ってる通例はタグとして用意されたみたいね。
<header>, <footer>とか<nav>, <aside>とか。
<header>, <footer>は、複数あっても良いとのこと。

<nav>は、いわゆるグローバルナビってヤツですな。
<menu>ってのもあるみたいだけど、これはインタラクティブなWebアプリ向けとのこと。
使い方は、実装がいろいろ出てきてからチーム内でルール決めしたりかなあ。

あとは<section>, <article>もあるけど、こちらも直感的にはわかりにくい。
文章の区切りだから、<h1>とかの見出しがセットで必須とのこと。
さらに<article>は、twitterやBlogみたいにまるっと引用されるときに使いましょうって感じ。

<img>とかと関連するテキストをまとめる<figure>ってのもあるから、より意味のあるカタマリを意識してマークアップしてねって事なのかな。
で、レイアウト整形とかで使う場合は素直に<div>使いましょうってさ。

詳しくは ココ とか ココ とか ココ を。

Error: Suspended

この本を読みながら勉強中

HTML5 / 01. HelloWorld!

HTML5勉強開始(今頃かい!!)

XHTMLの反省を生かしてか、結構柔軟なのね。

タグも結構省略出来るみたいで、jphone対応してた頃のHTMLを思い出した。

という事でココはプログラマらしくHelloWorld!から。

省略の限りをつくしてるので、良い子のみんなは真似しないでね。

01. Hello World!

あとは、EclipseのテンプレにHTML5を追加っと(こっちはちゃんとしたのを…)

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>${cursor}</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
Error: Suspended

この本を読みながら勉強中