Makale Geçmişi

Canvas çizimlerinde çizimlere gölge eklemek için kullanılan özellikler şunlardır: shadowColor - Gölgenin rengi shadowOffsetX - Gölgenin X konumu shadowOffsetY - Gölgenin Y konumu shadowBlur - Gölgenin yayılması / yumuşaklığı Canvas ile gölge oluştururken çizilen şeklin belirtilen gölge rengine sahip, aynı genişlik ve aynı yükseklikte düz bir halinin şeklin arkasında bulunduğu varsayılabilir. Arkadaki gölge şekli shadowOffsetX ile sağa veya sola (negatif değerlerle), shadowOffsetY ile yukarı veya aşağı kaydırılır. shadowBlur özelliği ile ise gölge renginden zemin rengine yumuşak bir geçiş için gölge uzatılabilir. Gölge özellikleri ayarlandıktan sonra başka değerlerle değiştirilene kadar yapılan tüm çizimler belirtilen gölge özelliklerine göre gölgelendirilir. Bir ya da daha fazla gölgeli şekli çizildikten sonra önceki duruma geri dönmek için save ve restore yöntemlerinden yararlanabilirsiniz. Katı gölgeye örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

ctx.fillStyle = "blue";

// Gölge rengi gri olsun.
ctx.shadowColor = "gray";
// Gölge yatay olarak 3 piksel kaydırılsın.
ctx.shadowOffsetX = 3;
// Gölge dikey olarak 5 piksel kaydırılsın.
ctx.shadowOffsetY = 5;

// Bu dörtgen gölgeli çizilecekdir.
ctx.fillRect(20, 20, 80, 50);

ctx.fillStyle = "yellow";

// Bu dörtgen de aynı gölge özellikleriyle çizilecek.
ctx.fillRect(20, 100, 80, 50);

}
</script>
Çıktı şöyle olacaktır: Yumuşak gölge için örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

ctx.fillStyle = "blue";

// Gölge rengi gri olsun.
ctx.shadowColor = "black";
// Gölgeyi yumuşatmak için 10 piksel uzatılsın.
ctx.shadowBlur = 10;

// Bu dörtgen gölgeli çizilecektir.
ctx.fillRect(20, 20, 80, 50);

// Gölgeyi yatay olarak 4 piksel kaydır.
ctx.shadowOffsetX = 4;
// Gölgeyi dikey olarak 4 piksel kaydırk.
ctx.shadowOffsetY = 4;

ctx.fillStyle = "yellow";

// Bu dörtgen kaydırılmış ve yumuşatılmış gölge ile çizilecek.
ctx.fillRect(20, 110, 80, 50);

}
</script>
Çıktı şöyle olacaktır: Gölge ile beraber save ve restore kullanımı: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

ctx.fillStyle = "blue";

// Tuvalin son durumunu sakla.
ctx.save();

ctx.shadowColor = "black";
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 5;

// Bu dörtgen gölgeli çizilecektir.
ctx.fillRect(20, 20, 80, 50);

// Tuvalin durumunu save'den önceki duruma getir.
ctx.restore();

// Bu dörtgen gölgesiz çizilecektir.
ctx.fillRect(20, 110, 80, 50);

}
</script>
Çıktı şöyle olacaktır: Dilerseniz buradan özellikleri test edebilirsiniz. Bu kadar. Eksik görürseniz lütfen bildirin. İ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  (Bu makale) 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 Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas çizimlerinde çizimlere gölge eklemek için kullanılan özellikler şunlardır: shadowColor - Gölgenin rengi shadowOffsetX - Gölgenin X konumu shadowOffsetY - Gölgenin Y konumu shadowBlur - Gölgenin yayılması / yumuşaklığı Canvas ile gölge oluştururken çizilen şeklin belirtilen gölge rengine sahip, aynı genişlik ve aynı yükseklikte düz bir halinin şeklin arkasında bulunduğu varsayılabilir. Arkadaki gölge şekli shadowOffsetX ile sağa veya sola (negatif değerlerle), shadowOffsetY ile yukarı veya aşağı kaydırılır. shadowBlur özelliği ile ise gölge renginden zemin rengine yumuşak bir geçiş için gölge uzatılabilir. Gölge özellikleri ayarlandıktan sonra başka değerlerle değiştirilene kadar yapılan tüm çizimler belirtilen gölge özelliklerine göre gölgelendirilir. Bir ya da daha fazla gölgeli şekli çizildikten sonra önceki duruma geri dönmek için save ve restore yöntemlerinden yararlanabilirsiniz. Katı gölgeye örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; // Gölge rengi gri olsun. ctx.shadowColor = "gray"; // Gölge yatay olarak 3 piksel kaydırılsın. ctx.shadowOffsetX = 3; // Gölge dikey olarak 5 piksel kaydırılsın. ctx.shadowOffsetY = 5; // Bu dörtgen gölgeli çizilecekdir. ctx.fillRect(20, 20, 80, 50); ctx.fillStyle = "yellow"; // Bu dörtgen de aynı gölge özellikleriyle çizilecek. ctx.fillRect(20, 100, 80, 50); } </script> Çıktı şöyle olacaktır: Yumuşak gölge için örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; // Gölge rengi gri olsun. ctx.shadowColor = "black"; // Gölgeyi yumuşatmak için 10 piksel uzatılsın. ctx.shadowBlur = 10; // Bu dörtgen gölgeli çizilecektir. ctx.fillRect(20, 20, 80, 50); // Gölgeyi yatay olarak 4 piksel kaydır. ctx.shadowOffsetX = 4; // Gölgeyi dikey olarak 4 piksel kaydırk. ctx.shadowOffsetY = 4; ctx.fillStyle = "yellow"; // Bu dörtgen kaydırılmış ve yumuşatılmış gölge ile çizilecek. ctx.fillRect(20, 110, 80, 50); } </script> Çıktı şöyle olacaktır: Gölge ile beraber save ve restore kullanımı: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.fillStyle = "blue"; // Tuvalin son durumunu sakla. ctx.save(); ctx.shadowColor = "black"; ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 4; ctx.shadowBlur = 5; // Bu dörtgen gölgeli çizilecektir. ctx.fillRect(20, 20, 80, 50); // Tuvalin durumunu save'den önceki duruma getir. ctx.restore(); // Bu dörtgen gölgesiz çizilecektir. ctx.fillRect(20, 110, 80, 50); } </script> Çıktı şöyle olacaktır: Dilerseniz buradan özellikleri test edebilirsiniz. Bu kadar. Eksik görürseniz lütfen bildirin. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.