Javascript Canvas ile Hareketli Gökyüzü

Javascript ile canvas örnekleri yapmaya devam ediyoruz.

Bu yazımızda javascript kullanarak interaktif bir gökyüzü nasıl yapılır onu göreceğiz.

html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>

script

 //canvas seçme ve context oluşturma

        var canvas = document.getElementById("canvas"),

            ctx = canvas.getContext("2d");

        //canvas genişlik ve yükseklik

        canvas.width = window.innerWidth - 5;

        canvas.height = window.innerHeight - 5;

        var yControl = window.innerHeight; //güneş yükseklik kontrolü

        var x = -150; //güneşin x konumu (-150 olmasının sebebi resim genişliği 150 olduğu için, en alt köşe orta noktadan başlar.)

        var y = window.innerHeight; //güneşin y konumu

        var cloudx = 120; //bulutun x konumu

        var cloudy = 80; // bulutun y konumu

        var sun = new Image();

        sun.src = "sun.png"; //güneş resmi yüklendi

        var cloud = new Image();

        cloud.src = "cld1.png"; //bulut resmi yüklendi

        var sky = new Image();

        sky.src = "sky1.jpeg"; //gökyüzü resmi yüklendi

        function draw() {

            ctx.clearRect(0, 0, canvas.width, canvas.height); //context hareketleri lineer bir ilerleme olduğundan her seferinde canvası temizleme işlemi

            //güneş ve bulutlar canvas içerisine çizilmesi

            ctx.drawImage(sky, 0, 0, window.innerWidth, window.innerHeight);

            ctx.drawImage(cloud, cloudx, cloudy, 500, 250);

            ctx.drawImage(cloud, cloudx - 200, cloudy, 500, 250);

            ctx.drawImage(cloud, cloudx - 400, cloudy - 150, 500, 250);

            ctx.drawImage(cloud, cloudx - 600, cloudy, 500, 250);

            ctx.drawImage(sun, x, y, 150, 150);

            ctx.drawImage(cloud, cloudx - 400, cloudy + 150, 500, 250);

            ctx.drawImage(cloud, cloudx - 200, cloudy + 350, 500, 250);

            ctx.drawImage(cloud, cloudx - 900, cloudy + 350, 500, 250);

            ctx.drawImage(cloud, cloudx - 1200, cloudy, 500, 250);

            //kontroller

            if (x >= window.innerWidth) { //güneşin x konumunun ekran genişliğinden büyük olması durumu

                x = -150;

                y = window.innerHeight;

                yControl = window.innerHeight;

                cloudx = 120;

            } else { //güneşin x konumunun ekran genişliğinden küçük olması durumu

                x += window.innerHeight / 900;

                yControl--;

                if (yControl > -25) {

                    y--;

                    color1 -= 0.2;

                    cloudx += 1.1;

                }

                else if (yControl < -25) {

                    y++;

                    color1 += 0.2;

                    cloudx += 1.1;

                }

            }

        }

        function update() {

            setInterval(function () {

                draw();

            }, 10) //saniyenin 100'de biri hızda yenileme

        }

        window.requestAnimationFrame(update());

medya

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir