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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です