html5で遊ぶ その３（canvasでアニメーション）【玄人向け】
前回までcontextをくるくるさせることで三角形を動かしていましたが、
contextそのものを動かさなくても描画する図形そのものを動かす方法もあります。
※translateやrotateを使わないパターンです。
難点はcosやsinが必要なぐらいですかね。
<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.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.save() radian = (++angle) * Math.PI/180; context.moveTo(100, 100); context.lineTo( 100 - Math.sin(radian) * 50, 100 + Math.cos(radian) * 50 ); context.lineTo( 100 + Math.cos(radian) * 50, 100 + Math.sin(radian) * 50 ); context.fill(); context.restore() }, 10); </script> </head> <body onload="init()"> <div> <canvas width="400" height="400" id="field"></canvas> </div> </body>
半径さえわかっていれば座標が計算できますね！
処理速度的なやつは測ってないのでよくわかりませんが（汗
