真横に動くオブジェクト｜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;
}