CanvasRenderingContext2D.save()


     html5.jpg



설명


    현재 컴퍼스의 적용된 상태를 스택에 저장합니다.


분류


    상태 API


형태


    void CanvasRenderingContext2D.save();


인수


    없음


반환


    없음


예제


<html> 

<head> 

   <script type="application/javascript"> 

    function draw() { 

      var canvas = document.getElementById("canvas"); 

      if (canvas.getContext) { 

        var ctx = canvas.getContext("2d"); 

 

        ctx.fillStyle = "rgb(200,0,0)"; 

        ctx.fillRect (10, 10, 40, 40); 

       

        ctx.save();

ctx.translate( 50, 0 );       

        ctx.fillStyle = "rgb(0,200,0)"; 

        ctx.fillRect (10, 10, 40, 40); 

        ctx.restore();

 

        ctx.save();

ctx.translate( 0, 50 );       

        ctx.fillStyle = "rgb(0,0, 200)"; 

        ctx.fillRect (10, 10, 40, 40); 

        ctx.restore();

 

        ctx.save();

ctx.translate( 50, 50 );       

        ctx.fillStyle = "rgb(0,0,0)"; 

        ctx.fillRect (10, 10, 40, 40); 

        ctx.restore();

 

      } 

    } 

   </script> 

</head> 

<body onload="draw();"> 

   <canvas id="canvas" width="150" height="150"></canvas> 

</body> 

</html>


결과


     save.png