HTML5(六)preserve and recover
HTML5(六)preserve and recover

1. save the state of canvas context
2. So we have two method to save and restore the state of Context
save()
restore()

it works like stack.

3. magic change

translate(dx,dy)
change the (0,0) point from the original (0,0), the original point (x,y) will be
x'=x+dx
y'=y+dy
eg:ctx.translate(5,8)

scale(sx,sy)
sx,sy is the enlarge and reduce factor, the original point(x,y) will be
x' = x * sx
y' = y * sy

rotate(a)
angle, the original point(x,y) will be
x'=x cosA - y sinA
y'=x sinA + y cosA

transform(m11,m12,m21,m22,dx,dy)
m11 m21 dx
m12 m22 dy
0 0 1
translate(dx,dy)：equal transform(1,0,0,1,dx,dy)
scale(sx,xy)：equal transform(sx,0,0,sy,0,0)
rotate(A)：equal transform(cosA,sinA,-sinA,cosA,0,0)

4. Group
Group is the situation that one picture in over another picture.
ctx.globalCompositeOperation = type
There are 12 types:
source-over 
source-in
source-out

5. Clip
my sample file test6.html:
<canvas id="canvas1" width="250" height="300"
    onmousedown="trans.transform(event);"
    onmouseup="trans.init(event);"
    onmousemove="trans.translate(event);"
    style="background-color:black">
    you are out!
</canvas>

<br/>
<input type="radio" name="r" id="r1" checked="checked">Move<br />
<input type="radio" name="r" id="r2">Large&Small<br />
<input type="radio" name="r"  id="r3">Circle<br />
<input type="radio" name="r"  id="r4">Large&Small&Circle<br />

<canvas id="canvas3" width="250" height="300" style="background-color:black">
    You are out!
</canvas><br/>
<input type="button" onclick="move(1);" value="Move1">
<input type="button" onclick="move(2);" value="Move2">
<input type="button" onclick="stop();" value="Stop"><br />
        <div>
            <table>
                <tr>
                    <td><canvas id="tut0" width="125" height="125"></canvas><br/><label id="lab0"></label></td>
                <td><canvas id="tut1" width="125" height="125"></canvas><br/><label id="lab1"></label></td>
                <td><canvas id="tut2" width="125" height="125"></canvas><br/><label id="lab2"></label></td>
                <td><canvas id="tut3" width="125" height="125"></canvas><br/><label id="lab3"></label></td>
                </tr>
                <tr>
                    <td><canvas id="tut4" width="125" height="125"></canvas><br/><label id="lab4"></label></td>
          &n