Hallo,
Ich bin Florian und versuche mir seit ein paar Tagen html und Javascript beizubringen. Kleine Websites habe ich schon geschafft. Jetzt wollte ich eine kleine Animation programmieren. Für den Einstieg wollte ich erst mal nur eine Erde und einen Mond haben der um die Sonne kreist. Ich habe schon lange nach Fehlern gesucht da nichts ausgeführt wird. Jetzt weiß ich nicht mehr weiter. Die codes habe ich mir aus dem Internet zusammen gesucht. Über eine Antwort mit Verbesserungen und Tipps würde ich mich sehr freuen.
Ich würde auch gerne bald mit 2d spielen anfangen. Welche Programmier Sprache ist dafür gut geeignet und wie kann man das lernen?
Florian
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Erde dreht sich </title>
</head>
<body>
<h1>Erde</h1>
<canvas id="canvas" widht="300" height="300"></canvas>
<script>
var sun=new Image ();
var moon=new Image ();
var earth=new image ();
function init(){
sun.src="sun.jpg";
moon.src="moon.jpg";
earth.src="earth.jpg";
window.requestAnimationFrame(draw);
}
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation='destination over';
ctx.clear Rect(0,0,300,300);
ctx.fillStyle='rgba(0,0,0,0.4)';
ctx.strokeStyle='rgba(0,153,255,0.4)';
ctx.save();
ctx.translate(150,150);
//Erde
var time=new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(105,0);
ctx.fillRect(0, -12,50,24);
ctx.drawImage(earth,-12,-12);
//moon
ctx.save();
ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5;);
ctx.restore();
ctx.restore();
ctx.beginPath();
ctx.arc(150,150,105,0,Math.PI * 2,false);
ctx.stroke();
//sun
ctx.drawImage(sun,0,0,300,300);
init();
window.requestAnimationFrame(draw);
</script>
</body>
</html>
Alles anzeigen