じょりらぼ

野菜だったりプログラムだったり電子工作だったり

html5で遊ぶ　その１（canvasでアニメーション）

html javascript プログラミング

今更ながらhtml5のcanvasで遊んでみました。
canvasはJavaScriptを使うといろいろとお絵かきができちゃいます。
しかも、大抵のスマホでも動かすことができます、素敵！！
（ばいばい、flash!

 

htmlを用意する

<html>
	<head></head>
<body>
	<div>
		<canvas width="400" height="400" id="field"></canvas>
	</div>
</body>

いろいろ省いていますが超シンプルに書くとこんなかんじ。
canvasのidは任意の名前で良いですが、今回は「field」としました。

では、図形を書いています。四角のサンプルはよくみるのであえて三角にしてみます。
図形の描画にはJavaScriptを使います。

JavaScriptを用意する

<html>
	<head>
		<script type="text/javascript">
			function init(){
				var canvas = document.getElementById('field');
				var context = canvas.getContext('2d');
				
				context.moveTo(100, 100);
				context.lineTo( 50, 150);
				context.lineTo(150, 150);
				context.fill();
			}
		</script>
	</head>
<body onload="init()">
	<div>
		<canvas width="400" height="400" id="field"></canvas>
	</div>
</body>

サンプルはこちら

var canvas = document.getElementById('field');
var context = canvas.getContext('2d');

canvasから描画機能を利用するための2Dコンテキストを取得し、

context.moveTo(100, 100);
context.lineTo( 50, 150);
context.lineTo(150, 150);

三角形の3点を座標指定して線を結び、

context.fill();

最後に塗りつぶしをしている流れになります。

これをonloadイベントで呼び出しているわけですね。
注意点としては2Dコンテキストはcanvasに対して１つということです。
これは後々重要になってきます。

動かしてみる

 アニメーションなので三角形をくるくる回してみたいと思います。

<html>
	<head>
		<script type="text/javascript">
		
			function init(){
				var canvas = document.getElementById('field');
				var context = canvas.getContext('2d');
				
				context.moveTo(100, 100);
				context.lineTo( 50, 150);
				context.lineTo(150, 150);
				context.fill();
			}
			
			var angle = 0;
			
			setInterval( function() {
				var canvas = document.getElementById('field');
				var context = canvas.getContext('2d');
				
				context.save();
				
				context.clearRect(0, 0, canvas.width, canvas.height);
				context.beginPath();
				
				context.translate(100, 100);
				context.rotate((++angle * Math.PI)/180);
				context.translate(-100, -100);
				
				context.moveTo(100, 100);
				context.lineTo( 50, 150);
				context.lineTo(150, 150);
				
				context.fill();
				context.restore();
				
			}, 10);
		</script>
	</head>
<body onload="init()">
	<div>
		<canvas width="400" height="400" id="field"></canvas>
	</div>
</body>

サンプルはこちら

setInterval( function() {
　　hogehoge
}, 10);

タイマー処理で10ミリ秒ごとにhogehogeを実行します。

context.save();
↓
context.restore();

アニメーションをつくるときのお作法的な感じですが、
描画前の状態を一旦保存し、
間に描画処理を記述して、描画内容を反映するといった流れになります。

context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();

これがないと残像が残ります（笑
ようはいったんクリアするための処理です

context.translate(100, 100);
context.rotate((++angle * Math.PI)/180);
context.translate(-100, -100);

回転する処理です、contextそのものを回転させています。
そのままrotateだけ書くと軸がずれるので、その場でくるくるそうような形にはなりません。

今回はここまで！
次は複数の図形をくるくるさせてみます。