Phương thức save và restore trong HTML5 Canvas là gì?

HTML5 canvas cung cấp hai phương thức quan trọng để lưu và khôi phục trạng thái canvas. Trạng thái canvas được lưu trên stack mỗi khi gọi save, và trạng thái lưu cuối cùng được lấy ra từ stack mỗi khi gọi restore.

Ví dụ

Chạy mã sau để học save/restore trong Canvas:

<!DOCTYPE HTML> <html>    <head>       <style>          #test {             width: 100px;             height:100px;             margin: 0px auto;          }       </style>       <script>          function drawShape(){             // lấy canvas bằng DOM             var canvas = document.getElementById('mycanvas');             // Đảm bảo không thực thi khi canvas không hỗ trợ             if (canvas.getContext){                // dùng getContext để vẽ                var ctx = canvas.getContext('2d');                // vẽ rectangle với setting mặc định                ctx.fillRect(0,0,150,150);                // Lưu trạng thái mặc định                ctx.save();                // Thay đổi setting                ctx.fillStyle = '#66FFFF'                ctx.fillRect( 15,15,120,120);                // Lưu trạng thái hiện tại                ctx.save();                // Thay đổi setting mới                ctx.fillStyle = '#993333'                ctx.globalAlpha = 0.5;                ctx.fillRect(30,30,90,90);                // Khôi phục trạng thái trước                ctx.restore();                // Vẽ rectangle với setting đã khôi phục                ctx.fillRect(45,45,60,60);                // Khôi phục trạng thái gốc                ctx.restore();                // Vẽ rectangle với setting đã khôi phục                ctx.fillRect(40,40,90,90);             } else {                alert('Bạn cần Safari hoặc Firefox 1.5+ để xem demo này.');             }          }       </script>    </head>    <body id = "test" onload = "drawShape();">       <canvas id = "mycanvas"></canvas>    </body> </html>