HTML5 Cavans(4) 保存和恢复Cavans状态 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {

            var cancans = document.getElementById("myCanvas");
            //得到2D渲染上下文
            var context = document.getElementById("myCanvas").getContext("2d");

            context.fillRect(0, 0, 100, 100);
            context.fillStyle = "red";
            context.fillRect(0, 0, 50, 50);

            DisplayColor();
            document.getElementById("btnRestore").onclick = function () {
                context.restore();
                DisplayColor();
                alert("RestoredColor:" + context.fillStyle);
            };

            document.getElementById("btnDraw").onclick = function () {
                context.fillRect(0, 0, 50, 50);
            };

            document.getElementById("btnSetColor").onclick = function () {
                var color = document.getElementById("txtColor").value;
                context.fillStyle = color;
                DisplayColor();
            };
            document.getElementById("btnSave").onclick = function () {
                context.save();
                alert("SavedColor:" + context.fillStyle);
            };

            function DisplayColor() {
                document.getElementById("spancolor").innerHTML = context.fillStyle;
            }
        };
    </script>
</head>
<body>
    <input type="button" id="btnRestore" value="Restore" >
    <input type="button" id="btnSave" value="Save" >
    <input type="button" id="btnDraw" value="Draw" >
    <input type="button" id="btnSetColor" value="SetColor" >
    <input type="text" id="txtColor" >
    <span>currentColor:</span><span id="spancolor"></span>
    <canvas id="myCanvas" height="300px" width="500px">
    </canvas>
</body>
</html>

 

对2d渲染上下文调用save方法保存当前状态，restore方法恢复状态，状态是线宽，颜色等属性，不包括画出的图形

每次save都会把当前状态存入绘图栈，每次restore方法把绘图栈最晚进的取出设置为当前状态

 

posted @ 2012-07-07 09:14  Bug山Bug海  阅读(582)  评论(0)  编辑  收藏  举报