真横に動くオブジェクト|HTML5(HTML5, JavaScript, CSS3) : デモ
真横に動くオブジェクト|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(3kb)
1.HTML
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8" /> <title>真横に動くオブジェクト</title> <link href="css/base.css" rel="stylesheet" type="text/css"> <script src="js/base.js"></script> </head> <body> <div id="contents"> <canvas id="canvas" width="300" height="300"></canvas> </div> </body> </html>
2.CSS
@charset "utf-8"; body { margin:0; padding:0; background-color: #fff; font-family:Helvetica, HiraKakuProN-W3, sans-serif; font-size:12px; color:#000; } #contents { position: absolute; top: 0; left: 0; width: 300px; height:300px; border: 1px solid #000; overflow:hidden; } #canvas { position: absolute; top: 0; left: 0; width: 300px; height:300px; }
3.JavaScript
base.js
window.addEventListener("load", init, false); var ctx = null; var theCanvas = null; var ball1 = new Object(); ball1.x = 0; ball1.y = 0; ball1.vx = 1; ball1.r = 10; var t = 1000/60; function init() { var theContents = document.getElementById("contents"); offsetX = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).width; offsetX = Number(offsetX.replace('px','')); offsetY = (theContents.currentStyle || document.defaultView.getComputedStyle(theContents,'')).height; offsetY = Number(offsetY.replace('px','')); offsetY = offsetY / 2; ball1.x = 0; ball1.y = 150; setBallAnimation(); } function setBallAnimation() { ctx = document.getElementById('canvas').getContext("2d"); setInterval(animation, t); } function animation() { ctx.clearRect(0,0,300,300); ctx.strokeStyle = "#000000"; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(moveX(), ball1.y, ball1.r,0,Math.PI*2,true); ctx.fill(); ctx.stroke(); } function moveX() { ball1.x = ball1.x + ball1.vx; if(ball1.x>offsetX) { ball1.x = 0; } return ball1.x; }