HTML5 Canvas Şeffaflığını Değiştirme

HTML5 Canvas ile öğelerin opaklığını ayarlamak için, canvas bağlamının globalAlpha özelliğini, 0 ile tamamen şeffaf ve 1 ile tamamen opak olan 0 ile 1 arasında gerçek bir sayıya ayarlayabiliriz.

Çıktı:

Kod:


    <canvas id="canvas" width="578" height="200"></canvas>
    <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    var imageObj = new Image();

    imageObj.onload = function() {
        context.drawImage(imageObj, 250, 50);
    };
    imageObj.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/001-happy.png'
    context.fill();
    context.closePath();
    // daire çiz
    
    context.beginPath();
    context.globalAlpha = 0.5;
    context.arc(320, 120, 60, 0, 2 * Math.PI, false);
    context.fillStyle = 'red';
    context.fill();

    </script>

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

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

context.beginPath();

var imageObj = new Image();

imageObj.onload = function() {

context.drawImage(imageObj, 250, 50);

};

imageObj.src = 'https://www.tasarimkodlama.com/wp-content/uploads/2019/04/001-happy.png'

context.fill();

context.closePath();

// daire çiz

context.beginPath();

context.globalAlpha = 0.5;

context.arc(320, 120, 60, 0, 2 * Math.PI, false);

context.fillStyle = 'red';

context.fill();

</script>

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Şeffaflığını Değiştirme

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap