円運動 _wonder Follow 2010-08-31 12:38:48 License: MIT License Fork15 Fav4 View29823 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 39 lines HTML 1 lines CSS 1 lines 円運動 window.onload = function(){ //Canvasのセット var canvas = document.getElementById("canvas"); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); //設定 var stageWidth = 445; var stageHeight = 445; var centerX = 200; var centerY = 200; var radius = 100; var angle = 0; var per = Math.PI / 36; var delay = 33; //繰り返し処理 var loop = function(){ ctx.clearRect( 0, 0, stageWidth, stageHeight ); //座標を取得 var posX = Math.cos( angle ) * radius + centerX; var posY = Math.sin( angle ) * radius + centerY; //Canvasに描画 ctx.beginPath(); ctx.fillStyle = "#cc0000"; ctx.arc( posX, posY, 20, 0, Math.PI * 2, true ); ctx.fill(); ctx.closePath(); //角度を増やす angle += per; }; loop(); var int = setInterval(loop, delay); }; <canvas id='canvas' width="445" height="445"></canvas> 円運動 body { background-color: #DDDDDD; font: 30px sans-serif; } window.onload = function(){ //Canvasのセット var canvas = document.getElementById("canvas"); if(!canvas.getContext) return; var ctx = canvas.getContext("2d"); //設定 var stageWidth = 445; var stageHeight = 445; var centerX = 200; var centerY = 200; var radius = 100; var angle = 0; var per = Math.PI / 36; var delay = 33; //繰り返し処理 var loop = function(){ ctx.clearRect( 0, 0, stageWidth, stageHeight ); //座標を取得 var posX = Math.cos( angle ) * radius + centerX; var posY = Math.sin( angle ) * radius + centerY; //Canvasに描画 ctx.beginPath(); ctx.fillStyle = "#cc0000"; ctx.arc( posX, posY, 20, 0, Math.PI * 2, true ); ctx.fill(); ctx.closePath(); //角度を増やす angle += per; }; loop(); var int = setInterval(loop, delay); }; <canvas id='canvas' width="445" height="445"></canvas> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/1IkM/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/_wonder/1IkM" title="円運動">円運動 - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Tags canvas rotate Favorite by montcryptome.. thepiglovesy.. _soup Junior.Santo..: canvasrotatecanvas Forked sort new page view favorite forked forked: 円運動 april_1986_ 00 25views 40/3/1 forked: 円運動 non-programm.. 00 15views 40/1/1 forked: 円運動 wakky1127 00 43views 40/1/1 forked: 円運動 mfukuda 00 57views 41/1/1 1 2 3 4NEXT>>
