Makale Geçmişi

globalAlpha özelliği, yapılan çizimler için genel bir saydamlık derecesi tanımlar. Bu özellikle saydamlık belirlendikten sonra yapılan tüm çizimler aynı saydamlıta olacaktır. globalAlpha özelliği 0 ile 1 arasında bir değer alır. Örneğin yarı saydam bir görüntü için 0.5 yazın. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />

<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.fillStyle = "red";

// Normal çiz (opak / ışık geçirmez).
ctx.fillRect(5, 5, 60, 40);

ctx.globalAlpha = 0.25;

// Yeni alpha değerine göre çizimler yap.
ctx.fillRect(60, 70, 60, 40);
ctx.fillRect(80, 90, 60, 40);


// Çizimler opak çizilsin.
ctx.globalAlpha = 1;

ctx.fillRect(135, 155, 60, 40);

}

ciz();

</script>
Çıktı şöyle olacaktır: İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme Canvas globalAlpha Özelliği  (Bu makale) Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

globalAlpha özelliği, yapılan çizimler için genel bir saydamlık derecesi tanımlar. Bu özellikle saydamlık belirlendikten sonra yapılan tüm çizimler aynı saydamlıta olacaktır. globalAlpha özelliği 0 ile 1 arasında bir değer alır. Örneğin yarı saydam bir görüntü için 0.5 yazın. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "red"; // Normal çiz (opak / ışık geçirmez). ctx.fillRect(5, 5, 60, 40); ctx.globalAlpha = 0.25; // Yeni alpha değerine göre çizimler yap. ctx.fillRect(60, 70, 60, 40); ctx.fillRect(80, 90, 60, 40); // Çizimler opak çizilsin. ctx.globalAlpha = 1; ctx.fillRect(135, 155, 60, 40); } ciz(); </script> Çıktı şöyle olacaktır: Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.