HTML Canvas Ders_6 Resimler (Images)

Canvas Elemanına Resim Yerleştirmek

Bir <canvas> elemanına resim yerleştirmek için şu metot kullanılır:

• drawImage(resim,x,y) : Bu metottaki x ve y değerleri, yerleştireceğimiz resmin sol üst köşesinin, canvas içindeki koordinatlarıdır.

Aşağıdaki örneğe dikkat edelim:

<p>Canvas olmadan resmimiz:</p>

<img id="html5" width="220" height="277"

src="html5.jpg" alt="html5 yerleşim tagları">

<p>Canvas içinde iken resmimiz:</p>

<canvas id="kanvasim" width="240" height="297"

style="border:1px solid #d3d3d3;">

Tarayıcınız HTML5 canvas tagını desteklemiyor.

</canvas>

<script>

window.onload = function() {

    var canvas = document.getElementById("kanvasim");

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

    var img = document.getElementById("html5");

   ctx.drawImage(img, 10, 10);

}

</script>

Bu kodlar tarayıcımızda şu şekilde görünecektir:

Canvas olmadan resmimiz:



Canvas içinde iken resmimiz:


Tarayıcınız HTML5 canvas tagını desteklemiyor.

sonraki ders için tıklayınız