HTML5 Canvas Resim Boyutu

HTML5 Canvas’ı kullanarak görüntünün boyutunu ayarlamak için drawImage() yöntemine, width ve height’e iki argüman ekleyebiliriz.

Çıktı:

Kod:


        <canvas id="canvas" width="578" height="400"></canvas>
        <script>
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            var x = 188;
            var y = 30;
            var width = 200;
            var height = 137;
            var imageObj = new Image();

            imageObj.onload = function() {
                context.drawImage(imageObj, x, y, width, height);
            };
            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 x = 188;

var y = 30;

var width = 200;

var height = 137;

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, x, y, width, height);

};

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 Boyutu

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap