Makale Geçmişi

Çizim yaparken değiştirdiğimiz özellikleri daha sonra yeniden kullanabilmek için, çizim sırasında bu özellik değerlerini tekrar eski haline getirmek gerekir ve bu da bazen çokca kod yazmamızı gerektirir. Örneğin bir metin görüntülerken lineStyle , fillStyle , textAlign ve font özelliklerini değiştirdiğimizi düşünelim. Metni yazdırdıktan sonra tekrar eski lineStyle , fillStyle , textAlign ve font özelliklerine dönmek için bu özellikleri tek tek eski değerleriyle yeniden değiştirmek gerekir. Bu da bir miktar kodlama gerektirir, bazen uzun olabilir ve hata yapmaya müsait bir durumdur. save ve restore yöntemleri bu işlem için kısa bir yol sunar. save yöntemi tuvalin aşağıda tamamı listelenen fillStyle , strokeStyle , lineWidh , lineCap , font gibi özellik değeri ve durumlarını saklar. restore yöntemi ise save ile saklanan tüm değerleri save yöntemini çağırmadan önceki haline getirir. Dolayısıyla save ile tuvalin durumunu değiştirmeden önce saklarsak daha sonra restore ile kolaylıkla saklanan duruma geri dönebiliriz. Ö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");
// Tuvalin şu anki durumunu sakla.
ctx.save();

// Bu ayarlardan önceki durumda strokeStyle değeri,
// düz siyah renk, lineWidth değeri ise 1 pikseldir.
ctx.strokeStyle = "blue"; // Çizgi stili düz mavi renk.
ctx.lineWidth = 5; // Çizgi kalınlığı 5 piksel.
ctx.strokeRect(10, 10, 50, 50);

// Tuvalin durumunu üstteki save yöntemini çağırmadan önceki
// duruma (lineWidth = 1, strokeStyle = "black") getir.
ctx.restore();
// Tuvalin son durumuyla bir dörtgen çiz.
ctx.strokeRect(100, 10, 50, 50);

}
</script>
Çıktısı şöyledir: save yöntemi restore çağırılmadan arka arkaya çağırılabilir. Böyle bir durumda her bir restore, bir önceki save ile saklanan duruma dönecektir. Ö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 = "gray";
ctx.font = "20px Arial";
ctx.fillText("Bir", 0, 20);

// Tuvalin şu anki durumunu (ilk değerleri) sakla.
// (fillStyle = "gray", font = "20px Arial" durumu)
ctx.save();

// font özelliğinin değerini değiştir
ctx.font = "italic 30px Times";
// Çizgi rengini değiştir
ctx.fillStyle = "blue";

// Yeni değerlerle bir metin görüntüle.
ctx.fillText("İki", 0, 60);

// Tuvalin şu anki durumunu sakla
// (fillStyle = "blue", font = "italic 30px Times" durumu)
ctx.save();

// fillStyle özelliğini değiştir.
ctx.fillStyle = "green";

// Yeni değerlerle bir metin görüntüle.
ctx.fillText("Üç", 0, 100);

// Bir önceki duruma geri dön
// (fillStyle = "blue", font = "italic 30px Times" durumu)
ctx.restore();

// Yeni değerlerle bir metin görüntüle.
ctx.fillText("Dört", 0, 140);

// Bir önceki duruma (ilk save'den önceki duruma) geri dön.
// (fillStyle = "gray", font = "20px Arial" durumu)
ctx.restore();

// Son değerlerle bir metin görüntüle.
ctx.fillText("Beş", 0, 180);

}
</script>
Çıktısı şöyle olacaktır: Görüleceği gibi "Bir" metni ilk durumda, "İki" metni ikinci durumda, "Üç" metni üçüncü durumda çizilmiştir. "Dört" metni yazıldığında ise ikinci duruma, "Beş" metni yazıldığında ise birinci / ilk duruma dönülmüştür. save yöntemi şunları saklar: strokeStyle , fillStyle , globalAlpha , lineWidth , lineCap , lineJoin , miterLimit , shadowOffsetX , shadowOffsetY , shadowBlur , shadowColor , globalCompositeOperation , font , textAlign , textBaseline   özellik değerleri ile daha sonraki makalelerde açıklanacak dönüştürme / biçim değiştirme ve kırpma alanı değerleri. İ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  (Bu makale) 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 Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Çizim yaparken değiştirdiğimiz özellikleri daha sonra yeniden kullanabilmek için, çizim sırasında bu özellik değerlerini tekrar eski haline getirmek gerekir ve bu da bazen çokca kod yazmamızı gerektirir. Örneğin bir metin görüntülerken lineStyle , fillStyle , textAlign ve font özelliklerini değiştirdiğimizi düşünelim. Metni yazdırdıktan sonra tekrar eski lineStyle , fillStyle , textAlign ve font özelliklerine dönmek için bu özellikleri tek tek eski değerleriyle yeniden değiştirmek gerekir. Bu da bir miktar kodlama gerektirir, bazen uzun olabilir ve hata yapmaya müsait bir durumdur. save ve restore yöntemleri bu işlem için kısa bir yol sunar. save yöntemi tuvalin aşağıda tamamı listelenen fillStyle , strokeStyle , lineWidh , lineCap , font gibi özellik değeri ve durumlarını saklar. restore yöntemi ise save ile saklanan tüm değerleri save yöntemini çağırmadan önceki haline getirir. Dolayısıyla save ile tuvalin durumunu değiştirmeden önce saklarsak daha sonra restore ile kolaylıkla saklanan duruma geri dönebiliriz. Ö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"); // Tuvalin şu anki durumunu sakla. ctx.save(); // Bu ayarlardan önceki durumda strokeStyle değeri, // düz siyah renk, lineWidth değeri ise 1 pikseldir. ctx.strokeStyle = "blue"; // Çizgi stili düz mavi renk. ctx.lineWidth = 5; // Çizgi kalınlığı 5 piksel. ctx.strokeRect(10, 10, 50, 50); // Tuvalin durumunu üstteki save yöntemini çağırmadan önceki // duruma (lineWidth = 1, strokeStyle = "black") getir. ctx.restore(); // Tuvalin son durumuyla bir dörtgen çiz. ctx.strokeRect(100, 10, 50, 50); } </script> Çıktısı şöyledir: save yöntemi restore çağırılmadan arka arkaya çağırılabilir. Böyle bir durumda her bir restore, bir önceki save ile saklanan duruma dönecektir. Ö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 = "gray"; ctx.font = "20px Arial"; ctx.fillText("Bir", 0, 20); // Tuvalin şu anki durumunu (ilk değerleri) sakla. // (fillStyle = "gray", font = "20px Arial" durumu) ctx.save(); // font özelliğinin değerini değiştir ctx.font = "italic 30px Times"; // Çizgi rengini değiştir ctx.fillStyle = "blue"; // Yeni değerlerle bir metin görüntüle. ctx.fillText("İki", 0, 60); // Tuvalin şu anki durumunu sakla // (fillStyle = "blue", font = "italic 30px Times" durumu) ctx.save(); // fillStyle özelliğini değiştir. ctx.fillStyle = "green"; // Yeni değerlerle bir metin görüntüle. ctx.fillText("Üç", 0, 100); // Bir önceki duruma geri dön // (fillStyle = "blue", font = "italic 30px Times" durumu) ctx.restore(); // Yeni değerlerle bir metin görüntüle. ctx.fillText("Dört", 0, 140); // Bir önceki duruma (ilk save'den önceki duruma) geri dön. // (fillStyle = "gray", font = "20px Arial" durumu) ctx.restore(); // Son değerlerle bir metin görüntüle. ctx.fillText("Beş", 0, 180); } </script> Çıktısı şöyle olacaktır: Görüleceği gibi "Bir" metni ilk durumda, "İki" metni ikinci durumda, "Üç" metni üçüncü durumda çizilmiştir. "Dört" metni yazıldığında ise ikinci duruma, "Beş" metni yazıldığında ise birinci / ilk duruma dönülmüştür. save yöntemi şunları saklar: strokeStyle , fillStyle , globalAlpha , lineWidth , lineCap , lineJoin , miterLimit , shadowOffsetX , shadowOffsetY , shadowBlur , shadowColor , globalCompositeOperation , font , textAlign , textBaseline   özellik değerleri ile daha sonraki makalelerde açıklanacak dönüştürme / biçim değiştirme ve kırpma alanı değerleri. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.