translate与rotate

translate与rotate

标签：html5，canvas

目录： - translate - rotate - 关系

一：translate

translate 在 canvas中定义了，画框的位置

比如

    <canvas id="myCanvas" style="border: 1px solid #d3d3d3;" width="300" height="150">
    <script>;
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);
    ctx.translate(150, 75);
    ctx.fillRect(10, 10, 100, 50);
    </script></canvas>;

> 定义一个宽300px，高150px的画布

  在画布的(10,10)坐标上，画一个矩形》》ctx.fillRect(10, 10, 100, 50);

  translate(150,75)命令

  就会在，已初始画布的基础上，向下移动150px，和向右移动75px

  此时，如果再画一个矩形，那么，位置，也会发生改变

  画布并没有改变，但是，观察画布的位置发生了变化

  我们重新，以(150,75)定义为左上角(0,0)的新观察窗口

二：rotate

    <canvas id="myCanvas" style="border: 1px solid #d3d3d3;" width="300" height="150">
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);
    ctx.translate(150, 75);
    ctx.rotate(Math.PI/6);//Math.PI 是 180度
    ctx.fillRect(10, 10, 100, 50);
    </script>
    </canvas>

rotate定义的是`旋转`，观察窗口的旋转，上面

ctx.rotate(Math.PI/6);就是旋转30度，顺时针(负值-逆时针)

三. rotate与translate的关系

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.translate(150, 75);
    ctx.rotate(1*Math.PI/6);
    ctx.translate(0, -25);
    ctx.fillText(1000000, 0, 0);
    ctx.fillRect(0, 0, 10, 5);
    ctx.translate(0, 25);
    ctx.fillText(1000000, 0, 0);
    ctx.fillRect(0, 0, 10, 5);
    ctx.rotate(-1*Math.PI/6);
    </script>

在于，当rotate,旋转后，translate，移动的窗口位置，随

着旋转。！！