HTML canvas Kullanımı

HTML <canvas> etiketi (tag), bir web sayfasında programatik olarak çizim yapmak ve animasyonlar oluşturmak için kullanılan bir arabirim (interface) sağlar. Etiket, genellikle JavaScript ile kullanılır ve çizimleri ve animasyonları dinamik olarak oluşturma işine yarar.

Aşağıdaki örnekleri inceleyelim...

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(10, 10, 50, 50);
</script>

Bu örnekte, bir canvas oluşturulmuş ve JavaScript kodu ile canvas üzerine bir dikdörtgen çizilmiştir. fillRect() metodu ile çizilen dikdörtgenin rengi kırmızı (red) olarak belirlenmiştir.

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();
</script>

Yukarıdaki örnekte, canvas üzerine bir yuvarlak çizilmiştir. beginPath() metodu ile yeni bir çizim başlatılmış ve arc() metodu ile yuvarlak çizilmiştir. stroke() metodu ise çizilen yuvarlak çizgisini görüntülemek için kullanılmıştır.

Son örneğimizi inceleyelim...

<canvas id="myCanvas" width="300" height="150"></canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = new Image();
    img.src = "image.png";
    img.onload = function(){
        ctx.drawImage(img,10,10);
    }
</script>

Bu örnekte, bir resim canvas üzerine yerleştirilmiştir. new Image() ile resim nesnesi oluşturulmuş ve src ile resmin kaynağı belirtilmiştir. onload event i (olayı) gerçekleştiğinde resim yüklenir ve canvas üzerine drawImage() metodu ile yerleştirilir.



İlginizi Çekebilir

HTML blockquote Kullanımı

HTML em Kullanımı

HTML Kalın Yazı Yapma

HTML h Başlık Kullanımı

HTML Paragraf Yapma