Javascript Canvas Örnekleri – 1

Javascript canvas ile yapılabileceklerin ucu bucağı yok. Bir at bir doğa manzarası ya da bir bilgisayar çizebilirsiniz. Bu sadece sizin yeteneğinize ve fikrinize bağlı bir durum.

Bu örnekte ben bir laptop çizmeye çalıştım elimden geldiğince. Daha da geliştirilebilir. Aşağıdaki kodları inceleyerek mantığını kavrayabilirisiniz.

html koldarı

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

script kodları

 var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var bg = new Image();
        bg.src = "https://www.maketecheasier.com/assets/uploads/2018/08/set-bing-daily-wallpaper-as-background-windows-10-header.jpg";

        canvas.width = window.innerWidth - 5;
        canvas.height = window.innerHeight - 5;


        //dış kasa
        ctx.strokeStyle = "black";
        ctx.lineWidth = 5;
        ctx.strokeRect(window.innerWidth / 2 - 300, window.innerHeight / 2 - 150, 600, 300);
        ctx.fillStyle = "#414244";
        ctx.fillRect(window.innerWidth / 2 - 300, window.innerHeight / 2 - 150, 600, 300);


        //ekran
        //panel
        ctx.strokeStyle = "black";
        ctx.lineWidth = 5;
        ctx.strokeRect(window.innerWidth / 2 - 275, window.innerHeight / 2 - 125, 550, 225);
        ctx.fillStyle = "#e8f0f7";
        ctx.drawImage(bg, window.innerWidth / 2 - 275, window.innerHeight / 2 - 125, 550, 225);
        //pencere
        //ana ekran
        ctx.shadowColor = "black";
        ctx.shadowBlur = 50;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 25;
        ctx.fillStyle = "#000";
        ctx.fillRect(window.innerWidth / 2 - 250, window.innerHeight / 2 - 100, 200, 150);

        //satırlar
        //1.satır
        ctx.fillStyle = "#c48383";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 80, 100, 5);
        ctx.fillStyle = "#992121";
        ctx.fillRect(window.innerWidth / 2 - 135, window.innerHeight / 2 - 80, 70, 5);
        //2.satır
        ctx.fillStyle = "#e5e56e";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 70, 50, 5);
        ctx.fillStyle = "#68685a";
        ctx.fillRect(window.innerWidth / 2 - 185, window.innerHeight / 2 - 70, 120, 5);
        //3.satır
        ctx.fillStyle = "#44442b";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 60, 120, 5);
        //4.satır
        ctx.fillStyle = "#73a2c6";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 50, 100, 5);
        ctx.fillStyle = "#992121";
        ctx.fillRect(window.innerWidth / 2 - 135, window.innerHeight / 2 - 50, 70, 5);
        //5.satır
        ctx.fillStyle = "#e5e56e";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 30, 50, 5);
        ctx.fillStyle = "#054170";
        ctx.fillRect(window.innerWidth / 2 - 185, window.innerHeight / 2 - 30, 120, 5);
        //6.satır
        ctx.fillStyle = "#44442b";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 20, 80, 5);
        //7.satır
        ctx.fillStyle = "#7f8284";
        ctx.fillRect(window.innerWidth / 2 - 240, window.innerHeight / 2 - 10, 150, 5);

        //araç çubuğu
        ctx.fillStyle = "#fff";
        ctx.fillRect(window.innerWidth / 2 - 250, window.innerHeight / 2 - 100, 200, 10);

        //kapat aç
        ctx.fillStyle = "#aa1414";
        ctx.fillRect(window.innerWidth / 2 - 60, window.innerHeight / 2 - 100, 10, 10);
        ctx.fillStyle = "#443c3c";
        ctx.fillRect(window.innerWidth / 2 - 70, window.innerHeight / 2 - 100, 10, 10);
        ctx.fillStyle = "#959699";
        ctx.fillRect(window.innerWidth / 2 - 80, window.innerHeight / 2 - 100, 10, 10);


        //ön kısım
        //gölge
        ctx.shadowColor = "black";
        ctx.shadowBlur = 55;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 30;
        //kenarlık
        ctx.lineWidth = 5;
        ctx.strokeRect(window.innerWidth / 2 - 350, window.innerHeight / 2 + 127.5, 700, 25);
        //panel
        ctx.fillStyle = "#545d66";
        ctx.fillRect(window.innerWidth / 2 - 350, window.innerHeight / 2 + 127.5, 700, 25);
        //kısım1
        ctx.fillStyle = "#000";
        ctx.fillRect(window.innerWidth / 2 - 50, window.innerHeight / 2 + 127.5, 100, 10);
        //kulaklık
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(window.innerWidth / 2 - 250, window.innerHeight / 2 + 140, 2, 10, Math.PI, 5);
        ctx.stroke();
        //mikrofon
        ctx.fillStyle = "#000";
        ctx.beginPath();
        ctx.arc(window.innerWidth / 2 - 225, window.innerHeight / 2 + 140, 2, 10, Math.PI, 5);
        ctx.stroke();

 

kodların vücut bulmuş hali

Bir cevap yazın

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