html5で遊ぶ その2（canvasでアニメーション）
前回は１つの三角形をくるくると回転させただけですので、
今回は複数の三角形をくるくるさせてみたいと思います。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); // 1つ目の三角形 context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); // 2つ目の三角形 context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() // 1つ目の三角形 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(); // 2つ目の三角形 context.translate(200, 200); context.rotate((++angle * Math.PI)/180); context.translate(-200, -200); context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); context.restore(); }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
単純に三角形を１つ増やしてやればいいだけだろ・・・へへん！
が、あれ？うまくいってませんね・・・
contextそのものを回転させているので、
まるで紙に２つ書いた三角形をくるくる回転させてるみたいですね。
修正してみる
そうではなくて、三角形１つづつを回転させるためには、
それぞれに対してsaveとrestoreをしてやる必要があります。
<html> <head> <script type="text/javascript"> function init(){ var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); // 1つ目の三角形 context.moveTo(100, 100); context.lineTo( 50, 150); context.lineTo(150, 150); // 2つ目の三角形 context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); } var angle = 0; setInterval( function() { var canvas = document.getElementById('field'); var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() // 1つ目の三角形 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() context.save() // 2つ目の三角形 context.translate(200, 200); context.rotate((++angle * Math.PI)/180); context.translate(-200, -200); context.moveTo(200, 200); context.lineTo(150, 250); context.lineTo(250, 250); context.fill(); context.restore(); }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
ちょっと間に足しただけですね！
いい感じですね。
