HTML5 Canvas Resim

HTML5 Canvas kullanarak bir resim çizmek için, bir resim nesnesi ve bir hedef nokta gerektiren drawImage() yöntemini kullanabiliriz. Hedef noktası, tuvalin sol üst köşesine göre görüntünün sol üst köşesini tanımlar.

DrawImage() yöntemi bir resim nesnesi gerektirdiğinden, önce bir resim oluşturmalı ve drawImage() öğesini başlatmadan önce yüklenmesini beklemeliyiz. Bunu image nesnesinin onload özelliğini kullanarak başarabiliriz.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="400"></canvas>
        <script>
          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
          var imageObj = new Image();
    
          imageObj.onload = function() {
            context.drawImage(imageObj, 10, 10);
          };
          imageObj.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2018/11/tasarim_kodlama_kutu-1-361x195.png';
        </script>

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 10, 10);

};

imageObj.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2018/11/tasarim_kodlama_kutu-1-361x195.png';

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Resim

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap