Keita-N/index.html

## 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>

## 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);
  }
}
	<!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>
	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);
	}
	}