molnarg/bolygok.html

## bolygok.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<canvas id="rajz" width="700" height="700"></canvas>

<script>
    var rajz = document.getElementById('rajz');
    var context = rajz.getContext('2d');

    // A circle és az animate függvény a jegyzetből lett kimásolva!
    var circle = function(r) {
        context.beginPath();
        context.arc(0, 0, r, 0, Math.PI*2, true);
        context.fill();
    };

    var animate = function(draw_callback) {
        var nextFrame = window.requestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.msRequestAnimationFrame;
        nextFrame(function callback(timestamp) {
            context.save();
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect (0, 0, rajz.width, rajz.height);
            draw_callback(timestamp);
            context.restore();
            nextFrame(callback);
        });
    };

    // Bolygó rajzoló függvény
    var bolygo = function(fazis, bolygo_tavolsag, bolygo_meret) {
        context.rotate(fazis * 2 * Math.PI);
        context.translate(0, bolygo_tavolsag);
        circle(bolygo_meret);
    };

    animate(function(t) {
        // A nap a vászon közepén van. A bolygókat mind hozzá kell viszonítani.
        context.translate(350, 350);
        context.fillStyle = 'yellow';
        circle(30);

        // A bolygók kitöltési színe fekete.
        context.fillStyle = 'black';

        // 1. bolygó
        context.save();
        var fazis_1 = (t % 4000) / 4000;
        bolygo(fazis_1, 100, 20);
        // Még nem töltöttük vissza a kurzort, ezért itt a bolygóhoz viszonyítva lehet rajzolni.
        // A hold úgy viszonyul a bolygóhoz, mind a bolygó a naphoz, ezért használható a bolygo() függvény!
        context.fillStyle = 'grey';
        bolygo(fazis_1, 40, 10);
        context.restore();
        // Itt a kurzor újra a nap helyén van, és fekete a kitöltési szín

        // 2. bolygó
        context.save();
        var fazis_2 = ((t + 1000) % 5000) / 5000;
        bolygo(fazis_2, 180, 15)
        context.fillStyle = 'grey';
        bolygo(fazis_2, 25, 5);
        context.restore();

        // 3. bolygó
        context.save();
        var fazis_3 = ((t + 3000) % 10000) / 10000;
        bolygo(fazis_3, 250, 10)
        context.fillStyle = 'grey';
        bolygo(fazis_3, 30, 6);
        context.restore();
    });
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<canvas id="rajz" width="700" height="700"></canvas>

	<script>
	var rajz = document.getElementById('rajz');
	var context = rajz.getContext('2d');

	// A circle és az animate függvény a jegyzetből lett kimásolva!
	var circle = function(r) {
	context.beginPath();
	context.arc(0, 0, r, 0, Math.PI*2, true);
	context.fill();
	};

	var animate = function(draw_callback) {
	var nextFrame = window.requestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.msRequestAnimationFrame;
	nextFrame(function callback(timestamp) {
	context.save();
	context.setTransform(1, 0, 0, 1, 0, 0);
	context.clearRect (0, 0, rajz.width, rajz.height);
	draw_callback(timestamp);
	context.restore();
	nextFrame(callback);
	});
	};

	// Bolygó rajzoló függvény
	var bolygo = function(fazis, bolygo_tavolsag, bolygo_meret) {
	context.rotate(fazis * 2 * Math.PI);
	context.translate(0, bolygo_tavolsag);
	circle(bolygo_meret);
	};

	animate(function(t) {
	// A nap a vászon közepén van. A bolygókat mind hozzá kell viszonítani.
	context.translate(350, 350);
	context.fillStyle = 'yellow';
	circle(30);

	// A bolygók kitöltési színe fekete.
	context.fillStyle = 'black';

	// 1. bolygó
	context.save();
	var fazis_1 = (t % 4000) / 4000;
	bolygo(fazis_1, 100, 20);
	// Még nem töltöttük vissza a kurzort, ezért itt a bolygóhoz viszonyítva lehet rajzolni.
	// A hold úgy viszonyul a bolygóhoz, mind a bolygó a naphoz, ezért használható a bolygo() függvény!
	context.fillStyle = 'grey';
	bolygo(fazis_1, 40, 10);
	context.restore();
	// Itt a kurzor újra a nap helyén van, és fekete a kitöltési szín

	// 2. bolygó
	context.save();
	var fazis_2 = ((t + 1000) % 5000) / 5000;
	bolygo(fazis_2, 180, 15)
	context.fillStyle = 'grey';
	bolygo(fazis_2, 25, 5);
	context.restore();

	// 3. bolygó
	context.save();
	var fazis_3 = ((t + 3000) % 10000) / 10000;
	bolygo(fazis_3, 250, 10)
	context.fillStyle = 'grey';
	bolygo(fazis_3, 30, 6);
	context.restore();
	});
	</script>

	</body>
	</html>