三角関数（3） _wonder Follow 2010-09-01 12:50:09 License: MIT License Fork0 Fav0 View28263 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 38 lines HTML 1 lines CSS 1 lines 三角関数（3） 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 angle = 0; var per = 0.1; var delay = 33; //初期値はステージの中央 var posX = stageWidth / 2; var posY = stageHeight / 2; //繰り返し処理 var loop = function(){ ctx.clearRect( 0, 0, stageWidth, stageHeight ); //座標を取得 posXを中心に左右100を移動する var vx = Math.sin( angle ) * 100 + posX; //Canvasに描画 ctx.beginPath(); ctx.fillStyle = "#cc0000"; ctx.arc( vx, 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> 三角関数（3） 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 angle = 0; var per = 0.1; var delay = 33; //初期値はステージの中央 var posX = stageWidth / 2; var posY = stageHeight / 2; //繰り返し処理 var loop = function(){ ctx.clearRect( 0, 0, stageWidth, stageHeight ); //座標を取得 posXを中心に左右100を移動する var vx = Math.sin( angle ) * 100 + posX; //Canvasに描画 ctx.beginPath(); ctx.fillStyle = "#cc0000"; ctx.arc( vx, 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/aN51/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/_wonder/aN51" title="三角関数（3）">三角関数（3） - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Forked sort new page view favorite forked forked: 三角関数（3） whiroki77 00 54views 39/1/1
