Skip to content

Instantly share code, notes, and snippets.

@Keita-N

Keita-N/index.html

Created June 16, 2015 06:38
Show Gist options
  • Save Keita-N/397139b57dc74b4de458 to your computer and use it in GitHub Desktop.
Save Keita-N/397139b57dc74b4de458 to your computer and use it in GitHub Desktop.
Download ZIP
スプライトアニメーション・サンプル
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Splite Animation Sample</title>
<script type="text/javascript" src="splite.js"></script>
</head>
<body>
<div id="canvasDiv"></div>
</body>
</html>
Raw
spliete.js
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
function canvasApp() {
var img = new Image();
img.src = "pengin.jpeg"
img.addEventListener('load', eventImageLoaded, false);
var frameW = 640;
var frameH = 360;
var fps = 10;
var canvasEl = document.createElement('canvas');
canvasEl.width = frameW;
canvasEl.height = frameH;
var div = document.getElementById('canvasDiv');
div.appendChild(canvasEl);
var context = canvasEl.getContext('2d');
function eventImageLoaded() {
requestAnimationFrame(animate);
}
var lastTime = 0;
var currentY = 0;
function animate(time) {
context.clearRect(0, 0, frameW, frameH);
context.drawImage(img,
0, currentY, frameW, frameH,
0, 0, frameW, frameH
);
if (time - lastTime >= 1000.0 / fps) {
currentY += frameH;
lastTime = time;
}
requestAnimationFrame(animate);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment