イメージの切り抜き描画

HTML5

Sample09.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>Sample09.html</title>
<script>
function draw() {
	var canvas = document.getElementById("canvas1");
	var c = canvas.getContext("2d");
	var img = new Image();
	img.src = "img/tree001.png";
	c.drawImage(img, 10, 10, 64, 64, 100, 100, 128, 32);
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas1" width="300" height="300"></canvas>
</body>
</html>

元のテクスチャはこれですが

一部分の描画なので、こんな感じになります

今日、新宿で「DeNA Technology Seminar #3」に参加してきました。
http://atnd.org/events/9585
HTML5を使っている会社がもっとふえるといいなー
WebGLの話がでてたのは良かったです、O3Dの話をでてきたら、もっとよかったですが・・

HTML5で３Dはもう少ししたら、ブログにも書こうと思います。
（独自で作ったエンジンだと、iPadだと遅いのでどうしよう・・・）