千呼万唤 HTML 5 (10) - 画布（canvas）之转换

Send_linux

介绍
HTML 5: 画布（canvas）之转换（转换画布的用户坐标系）

平移 | translate()

旋转 | rotate()

缩放 | scale()

矩阵转换 | transform(a, b, c, d, e, f)

矩阵转换 | setTransform(a, b, c, d, e, f)

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



    平移


     
        您的浏览器不支持 canvas 标签
     
   

    不断地点我看 Demo
    清除画布
   
     
   
        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) - 将当前的用户坐标系平移指定的距离
             *   x - x 轴方向上需要平移的像素数
             *   y - y 轴方向上需要平移的像素数
             */
            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);
        }
   
     

2、旋转 | rotate()
canvas/transform/rotate.html



    旋转


     
        您的浏览器不支持 canvas 标签
     
   

    不断地点我看 Demo
    清除画布
   
     
   
        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) - 将当前的用户坐标系旋转指定的弧度，顺时针为正值，逆时针为负值
             *   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);
        }
   
     

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



    缩放


     
        您的浏览器不支持 canvas 标签
     
   

    不断地点我看 Demo
    清除画布
   
     
   
        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) - 将当前的用户坐标系缩放指定的倍数
             *   x - 水平方向上的缩放倍数
             *   y - 垂直方向上的缩放倍数
             */
            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);
        }
   
     

4、矩阵转换 | transform(a, b, c, d, e, f)
canvas/transform/transform.html

本文来自ChinaUnix文档频道，如果查看原文请点：http://doc.chinaunix.net/web/201208/2325449.shtml