Html5 canvas restore ve save fonksiyonları ne işe yarar?
html5 canvas içerisinde kullandığımız restore ve save komutları o anki durumu kaydetmek ve çağırmak için kullanılır.
Bir örnekle açıklayayım.
<script type="text/javascript">
var can=document.getElementById("arif");
var c=can.getContext("2d");
c.fillStyle="#FF0000";
c.fillRect(0,0,100,100);
c.fillStyle="#b66a6a";//kırmızı
c.fillStyle="#406fcd";//mavi
c.save();
c.fillStyle="#61cd40";//yeşil
c.restore();
c.fillRect(200,200,100,150);
</script>
Yukarıdaki örnekte canvas ve context tanımlanmakta. Daha sonrasında fillstyle a kırmızı renk tanımlanmaktadır. Örneğin bu tanımlamadan sonra dikdörtgen çizmeye kalksak kırmızı çizecektir. Daha sonra fillstyle a mavi tanımlanmaktadır. Ve bu tanımlama save metodu ile kaydedilmektedir.
Sonrasında fillstyle a yeşil tanımlanmaktadır. Burdan sonrasında restore komutu çalıştırdığımız için save komutunun uygulandığı duruma geri dönecektir. Yani sonraki komutta çizilen dikdörtgen yeşil renkte değil mavi renkte olacaktır. Style kaydedilmiş, daha sonrasında o style a geri dönülmüştür.