Anasayfa / Bilgisayar Mühendisliği / Canvas Elementi Örneği

Canvas Elementi Örneği

Canvas elementinin HTML5 için çok kullanışlı bir element olduğunu söyleyebilirim. JavaScript ile birleştiği takdirde büyük projelerin gerçekleştirilebileceği, oyunların dahi daha rahat bir şekilde yapılabileceği bir element.

Bugün Canvas elementi ile ilgili butona tıklandığı zaman Canvas’daki resmin siyah-beyaz formata dönüştürüldüğü bir örnek yapmaya çalıştım. Tabii bunu yapmam için JavaScript’i kullanmam gerektiğini de biliyordum. Öncelikle HTML kısmında Canvas elementini oluşturmam gerekiyordu. Bunun için;

    <body onmousedown="return false;">
        <canvas id="myCanvas" width="340" height="548">

        </canvas>
		<br></br>
		<button onClick="tikla()" type="button">Tıkla Değişsin</button>

    </body>

Id=”myCanvas” olan genişliğini ve yüksekliğini belirttiğim bir alan oluşturdum. Daha sonra butonumu oluşturarak, tıkla adında bir metot yaratarak tıklandığı zaman o metodu çağırmasını sağladım.

<head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
                 }
            #myCanvas {
                border: 1px solid black;
                      }

        </style>
      <script>
              window.onload = function(){
                var imageObj = new Image();
                imageObj.onload = function(){
                    normalresim(this);
                };
                imageObj.src = "img/atakule.jpg";
            };
            function normalresim(imageObj){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                var X = 0;
                var Y = 0;
                context.drawImage(imageObj, X, Y);
				}
            function tikla(){
                var imageObj = new Image();
                imageObj.onload = function(){
                    imagetogray(this);
                };
                imageObj.src = "img/atakule.jpg";
                };

            function imagetogray(imageObj){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                var X= 0;
                var Y = 0;

                context.drawImage(imageObj, X, Y);

                var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
                var data = imageData.data;

                for (var i = 0; i < data.length; i += 4) {
                    var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
                    data[i] = brightness; //kırmızı
                    data[i + 1] = brightness; //yesil
                    data[i + 2] = brightness;
                }
                context.putImageData(imageData, 0, 0);
            }
        </script>
    </head>

Fonksiyonum  ilk başta önceden ayarladığım resmi değişkene atarak onun üzerinden işlem yapmamı sağlayacak.

Imagetogray metodunu çağırarak internet üzerinden araştırdığım resmi siyah-beyaz formata çeviren matematiksel formülü uygulayarak resmi istediğim gibi yapmamı sağladım. Ve web tarayıcısı ile çalıştırdığım zaman şu sonucu aldım.

canvas ornek

Belki bunu başka yöntemle yapmak istesem yüzlerce satır komut yazmam gerekebilirdi. Fakat JavaScript+HTML5 benim işlemlerimi kısaltarak daha hızlı sonuç almamı sağladı.

Hakkında Ali Demirci

Ben Ali Demirci... 1991 Ankara doğumluyum. Ankara da yaşıyorum. Fırsat buldukça öğrendiklerimi burada paylaşıyorum. Java ile haşır neşirim. Android'den asla vazgeçemem. Öğrenmeye bayılırım. Yeni şeyler öğrendiğimde, geçmişteki projelerimde keşke böyle yapsaydım diye çok üzülmüşümdür. O yüzden öğrenmekten korkmayın. Takıldığınız yerleri mutlaka sorun. Biliyorsam yanıt veririm. Bilmiyorsam yol gösteririm. Teşekkürler :)

Kontrol Et

İşletim Sistemlerine Giriş

İşletim sistemleri, bilgisayar donanımları ve kullanıcılar arasında iletişim sağlamak amacıyla yazılmış olan programlardır. Bilgisayar Nedir? …