HTML 5深入淺出教學(xué)篇之十

作者：webabcd 2012-05-31 09:54:13

本文講要的講的是HTML 5畫(huà)布（canvas）之轉(zhuǎn)換：平移|translate()；旋轉(zhuǎn)|rotate()；縮放|scale()；矩陣轉(zhuǎn)換|transform(a, b, c, d, e, f)

介紹

HTML 5: 畫(huà)布（canvas）之轉(zhuǎn)換（轉(zhuǎn)換畫(huà)布的用戶坐標(biāo)系）

平移 | translate()

旋轉(zhuǎn) | rotate()

縮放 | scale()

矩陣轉(zhuǎn)換 | transform(a, b, c, d, e, f)

矩陣轉(zhuǎn)換 | setTransform(a, b, c, d, e, f)

示例

1、平移 | translate()
canvas/transform/translate.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>平移</title> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標(biāo)簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">不斷地點(diǎn)我看 Demo</button> 
    <button type="button" onclick="clearIt();">清除畫(huà)布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var canvasX = 0;  
        var canvasY = 0;  
        var stepX = 20;  
        var stepY = 20;  
        function drawIt() {  
            if (canvasX == 0 && canvasY == 0)  
                ctx.strokeRect(0, 0, 100, 100);  
            canvasX += stepX;  
            canvasY += stepY;  
            /*  
             * context.translate(x, y) - 將當(dāng)前的用戶坐標(biāo)系平移指定的距離  
             *   x - x 軸方向上需要平移的像素?cái)?shù)  
             *   y - y 軸方向上需要平移的像素?cái)?shù)  
             */  
            ctx.strokeStyle = "blue";  
            ctx.translate(stepX, stepY);  
            ctx.strokeRect(0, 0, 100, 100);  
        }  
        function clearIt() {  
            ctx.translate(-canvasX, -canvasY);  
            canvasX = 0;  
            canvasY = 0;  
            ctx.strokeStyle = "black";  
            ctx.clearRect(0, 0, 400, 400);  
        }  
    </script> 
</body> 
</html>

2、旋轉(zhuǎn) | rotate()
canvas/transform/rotate.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>旋轉(zhuǎn)</title> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標(biāo)簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">不斷地點(diǎn)我看 Demo</button> 
    <button type="button" onclick="clearIt();">清除畫(huà)布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var canvasRadian = 0;  
        var stepRadian = 15 * Math.PI / 180;  
        function drawIt() {  
            if (canvasRadian == 0)  
                ctx.strokeRect(360, 0, 20, 60);  
            canvasRadian += stepRadian;  
            /*  
             * context.rotate(radian) - 將當(dāng)前的用戶坐標(biāo)系旋轉(zhuǎn)指定的弧度，順時(shí)針為正值，逆時(shí)針為負(fù)值  
             *   radian - 弧度值  
             */  
            ctx.strokeStyle = "blue";  
            ctx.rotate(stepRadian);  
            ctx.strokeRect(360, 0, 20, 60);  
        }  
        function clearIt() {  
            ctx.rotate(-canvasRadian);  
            canvasRadian = 0;  
            ctx.strokeStyle = "black";  
            ctx.clearRect(0, 0, 400, 400);  
        }  
    </script> 
</body> 
</html>

3、縮放 | scale()
canvas/transform/scale.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>縮放</title> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標(biāo)簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">不斷地點(diǎn)我看 Demo</button> 
    <button type="button" onclick="clearIt();">清除畫(huà)布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var canvasScaleX = 1;  
        var canvasScaleY = 1;  
        var stepScaleX = 1.1;  
        var stepScaleY = 1.1;  
        function drawIt() {  
            if (canvasScaleX == 1 && canvasScaleY == 1)  
                ctx.strokeRect(0, 0, 60, 60);  
            canvasScaleX *= stepScaleX;  
            canvasScaleY *= stepScaleY;  
            /*  
             * context.scale(x, y) - 將當(dāng)前的用戶坐標(biāo)系縮放指定的倍數(shù)  
             *   x - 水平方向上的縮放倍數(shù)  
             *   y - 垂直方向上的縮放倍數(shù)  
             */  
            ctx.strokeStyle = "blue";  
            ctx.scale(stepScaleX, stepScaleY);  
            ctx.strokeRect(0, 0, 60, 60);  
        }  
        function clearIt() {  
            ctx.scale(1 / canvasScaleX, 1 / canvasScaleY);  
            canvasScaleX = 1;  
            canvasScaleY = 1;  
            ctx.strokeStyle = "black";  
            ctx.clearRect(0, 0, 400, 400);  
        }  
    </script> 
</body> 
</html>

#p#

4、矩陣轉(zhuǎn)換 | transform(a, b, c, d, e, f)
canvas/transform/transform.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>矩陣轉(zhuǎn)換 | transform(a, b, c, d, e, f)</title> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標(biāo)簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">不斷地點(diǎn)我看 Demo</button> 
    <button type="button" onclick="clearIt();">清除畫(huà)布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        var canvasScaleX = 1;  
        var canvasScaleY = 1;  
        var stepScaleX = 1.1;  
        var stepScaleY = 1.1;  
        function drawIt() {  
            if (canvasScaleX == 1 && canvasScaleY == 1)  
                ctx.strokeRect(0, 0, 60, 60);  
            canvasScaleX *= stepScaleX;  
            canvasScaleY *= stepScaleY;  
            /*  
             * context.transform(a, b, c, d, e, f) - 按指定的矩陣轉(zhuǎn)換當(dāng)前的用戶坐標(biāo)系  
             *   相當(dāng)于：context.transform(M11, M12, M21, M22, OffsetX, OffsetY)  
             *  
             * 關(guān)于仿射矩陣參考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html  
             *  
             *   |X|             |M11（默認(rèn)值 1）      M21（默認(rèn)值 0）       0|  
             *   |Y| = |x y 1| * |M12（默認(rèn)值 0）      M22（默認(rèn)值 1）       0|  
             *   |1|             |OffsetX（默認(rèn)值 0）  OffsetY（默認(rèn)值 0）   1|  
             *  
             *   X = x * M11 + y * M12 + OffsetX  
             *   Y = x * M21 + y * M22 + OffsetY  
             */  
            ctx.strokeStyle = "blue";  
            ctx.transform(stepScaleX, 0, 0, stepScaleY, 0, 0);  
            ctx.strokeRect(0, 0, 60, 60);  
        }  
        function clearIt() {  
            ctx.transform(1 / canvasScaleX, 0, 0, 1 / canvasScaleY, 0, 0);  
            canvasScaleX = 1;  
            canvasScaleY = 1;  
            ctx.strokeStyle = "black";  
            ctx.clearRect(0, 0, 400, 400);  
        }  
    </script> 
</body> 
</html>

5、矩陣轉(zhuǎn)換 | setTransform(a, b, c, d, e, f)
canvas/transform/setTransform.html

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>矩陣轉(zhuǎn)換 | setTransform(a, b, c, d, e, f)</title> 
</head> 
<body> 
    <canvas id="canvas" width="400" height="400" style="background-color: rgb(222, 222, 222)"> 
        您的瀏覽器不支持 canvas 標(biāo)簽  
    </canvas> 
    <br /> 
    <button type="button" onclick="drawIt();">Demo</button> 
    <button type="button" onclick="clearIt();">清除畫(huà)布</button> 
    <script type="text/javascript"> 
        var ctx = document.getElementById('canvas').getContext('2d');  
        function drawIt() {  
            ctx.strokeStyle = "red";  
            ctx.scale(2, 2);  
            ctx.strokeRect(0, 0, 60, 60);  
            /*  
             * context.setTransform(a, b, c, d, e, f) - 首先重置用戶坐標(biāo)系，然后再按指定的矩陣轉(zhuǎn)換用戶坐標(biāo)系（translate, rotate, scale, transform 是針對(duì)當(dāng)前用戶坐標(biāo)系做轉(zhuǎn)換，而 setTransform 是針對(duì)重置后的用戶坐標(biāo)系做轉(zhuǎn)換）  
             *   相當(dāng)于：context.setTransform(M11, M12, M21, M22, OffsetX, OffsetY)  
             *  
             * 關(guān)于仿射矩陣參考：http://www.cnblogs.com/webabcd/archive/2008/11/03/1325150.html  
             *  
             *   |X|             |M11（默認(rèn)值 1）      M21（默認(rèn)值 0）       0|  
             *   |Y| = |x y 1| * |M12（默認(rèn)值 0）      M22（默認(rèn)值 1）       0|  
             *   |1|             |OffsetX（默認(rèn)值 0）  OffsetY（默認(rèn)值 0）   1|  
             *  
             *   X = x * M11 + y * M12 + OffsetX  
             *   Y = x * M21 + y * M22 + OffsetY  
             */  
            ctx.strokeStyle = "blue";  
            ctx.setTransform(1, 0, 0, 1, 0, 0);  
            ctx.strokeRect(0, 0, 60, 60);  
        }  
        function clearIt() {  
            ctx.clearRect(0, 0, 400, 400);  
        }  
    </script> 
</body> 
</html>