rockos/index_anime1.html

## index_anime1.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>KidsLab Animation</title>
  <script src="main_anime1.js"></script>
  <style>body{background:white;margin:0;padding:0;}</style>
</head>

<body>
  <canvas id="world" style="display:block;margin:auto;"></canvas>
</body>

</html>

## main_anime1.js
var canvas; //= document.getElementById('world');
var context //= canvas.getContext('2d');
var SCREEN_SIZE = 500; // キャンバスの幅


var speed = 2;    //移動速度
var x = 0;      //X軸の位置
window.onload = function() {
    canvas = document.getElementById('world'); // canvas要素を取得
    context = canvas.getContext('2d');                // コンテキスト
    canvas.width = canvas.height = SCREEN_SIZE; // キャンバスのサイズを設定
}
// ループ処理
function loop() {
    requestAnimFrame(loop);
    context.clearRect(0,0, canvas.width, canvas.height);
    // ループ毎にxを加算
    x += speed;
    // 丸を描画
    drawCircle(x, 100, 20, '#D0A869');

    if (x > 600) x = 0;
}


function drawCircle(x, y, scale, color) {
    context.beginPath();
    context.arc(x, y, scale, 0, 2*Math.PI, false);
    context.fillStyle = color;
    context.fill();
}

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

loop();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>KidsLab Animation</title>
	<script src="main_anime1.js"></script>
	<style>body{background:white;margin:0;padding:0;}</style>
	</head>

	<body>
	<canvas id="world" style="display:block;margin:auto;"></canvas>
	</body>

	</html>
	var canvas; //= document.getElementById('world');
	var context //= canvas.getContext('2d');
	var SCREEN_SIZE = 500; // キャンバスの幅


	var speed = 2; //移動速度
	var x = 0; //X軸の位置
	window.onload = function() {
	canvas = document.getElementById('world'); // canvas要素を取得
	context = canvas.getContext('2d'); // コンテキスト
	canvas.width = canvas.height = SCREEN_SIZE; // キャンバスのサイズを設定
	}
	// ループ処理
	function loop() {
	requestAnimFrame(loop);
	context.clearRect(0,0, canvas.width, canvas.height);
	// ループ毎にxを加算
	x += speed;
	// 丸を描画
	drawCircle(x, 100, 20, '#D0A869');

	if (x > 600) x = 0;
	}


	function drawCircle(x, y, scale, color) {
	context.beginPath();
	context.arc(x, y, scale, 0, 2*Math.PI, false);
	context.fillStyle = color;
	context.fill();
	}

	window.requestAnimFrame = (function(){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback){
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	loop();