HTML5 ক্যানভাস ক্যানভাস স্টেট সংরক্ষণ এবং পুনরুদ্ধার করার জন্য দুটি গুরুত্বপূর্ণ মেথড প্রদান করে।
প্রতিবার save() মেথড কল হলে ক্যানভাস স্টেটগুলো একটি স্ট্যাকে সংরক্ষিত হয়, এবং প্রতিবার restore() মেথড কল হলে স্ট্যাক থেকে শেষ সংরক্ষিত স্টেট রিটার্ন হয়।
| ক্র. নং | মেথড এবং বিবরণ |
|---|---|
| 1 | save() এই মেথড বর্তমান স্টেটকে স্ট্যাকে পুশ করে। |
| 2 | restore() এই মেথড স্ট্যাকের টপ স্টেটটি পপ করে, কন্টেক্সটকে সেই স্টেটে ফিরিয়ে আনয়। |
উদাহরণ
HTML5 ক্যানভাস সংরক্ষণ এবং পুনরুদ্ধার করতে নিচের কোড চালান −
<!DOCTYPE HTML> <html> <head> <style> #test { width: 100px; height:100px; margin: 0px auto; } </style> <script> function drawShape(){ // DOM ব্যবহার করে ক্যানভাস এলিমেন্ট পান var canvas = document.getElementById('mycanvas'); // নিশ্চিত করুন ক্যানভাস সাপোর্ট না থাকলে এক্সিকিউট না হয় if (canvas.getContext){ // getContext ব্যবহার করে ক্যানভাস ড্রয়িংয়ের জন্য var ctx = canvas.getContext('2d'); // ডিফল্ট সেটিংসে একটি আয়ত আঁকুন ctx.fillRect(0,0,150,150); // ডিফল্ট স্টেট সংরক্ষণ করুন ctx.save(); // সেটিংসে পরিবর্তন আনুন ctx.fillStyle = '#66FFFF' ctx.fillRect( 15,15,120,120); // বর্তমান স্টেট সংরক্ষণ করুন ctx.save(); // নতুন সেটিংসে পরিবর্তন আনুন ctx.fillStyle = '#993333' ctx.globalAlpha = 0.5; ctx.fillRect(30,30,90,90); // পূর্বের স্টেট পুনরুদ্ধার করুন ctx.restore(); // পুনরুদ্ধার করা সেটিংস দিয়ে একটি আয়ত আঁকুন ctx.fillRect(45,45,60,60); // মূল স্টেট পুনরুদ্ধার করুন ctx.restore(); // পুনরুদ্ধার করা সেটিংস দিয়ে একটি আয়ত আঁকুন ctx.fillRect(40,40,90,90); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </script> </head> <body id = "test" onload = "drawShape();"> <canvas id = "mycanvas"></canvas> </body> </html> 