HTML5 Canvas Resim Kırpma

HTML5 Canvas kullanarak bir görüntüyü kırpmak için drawImage() yöntemine, sourceX, sourceY, sourceWidth, sourceHeight, destWidth ve destHeight’a altı ek argüman ekleyebiliriz. Bu argümanlar bir görüntüden kesmek istediğimiz bir dikdörtgenin konumunu ve boyutunu tanımlar.

Çı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() {
            // draw cropped image
            var sourceX = 150;
            var sourceY = 0;
            var sourceWidth = 150;
            var sourceHeight = 150;
            var destWidth = sourceWidth;
            var destHeight = sourceHeight;
            var destX = canvas.width / 2 - destWidth / 2;
            var destY = canvas.height / 2 - destHeight / 2;

            context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
            };
            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() {

// draw cropped image

var sourceX = 150;

var sourceY = 0;

var sourceWidth = 150;

var sourceHeight = 150;

var destWidth = sourceWidth;

var destHeight = sourceHeight;

var destX = canvas.width / 2 - destWidth / 2;

var destY = canvas.height / 2 - destHeight / 2;

context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);

};

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 Kırpma

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap