Beiträge von Florian09

Florian09

Danke für deine Antwort! Aber wie kann ich diese Syntax Fehler beheben ? In der console sehe ich nur die Fehler.

Florian

Florian09

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

Beiträge von Florian09

Animation mit canvas

Animation mit canvas