html5 canvas translate（）方法理解记录

接触多了html5 canvas 慢慢开始发现后面的canvas数学相关越来越多，坐标系，坐标，sin，cos，tan，矩阵。。越来越有难度有意思了

现在接触到canvas  translate（x，y） 发现其中有点古怪，还是先看w3c上是怎么解释的：

Translating（转换）

　　该方法用于“移动”canvas，之后画布的原点（0,0）将改变为（0+x，0+y）

　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.fillRect(10,10,100,50);
　　ctx.translate(70,70);
　　ctx.fillRect(10,10,100,50);

如上例子, 第一个矩形起始坐标为（10,10） 调用了translate（70,70）后，新建了一个坐标系，原点改变，在第二个矩形开始画的起始坐标变为（10+70,10+70） 

 

这就是translate（x，y）古怪的地方，调用后将影响后面画布元素

例如：var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　context.fillRect(150, 50 , 10, 10);

      context.translate(150, 50);//坐标原点变为（150,50）

      context.fillRect(150,50 , rectWidth, rectHeight);

     context.translate(150, 50);//这是坐标原点变（300，100）

     context.fillRect(150, 50 , rectWidth, rectHeight); //矩形的起始变为（450,100）

可想而知，canvas会记录当前原点坐标，每当调用了translate（x，y）方法后新的坐标原点会在原先的基础上加上相应的值，影响到很多方法如clearRect（x，y，width，height） fillRect（x，y，width，height）等等

参考（http://www.w3schools.com/tags/canvas_translate.asp）

转载于:https://www.cnblogs.com/gfqFighting/archive/2012/11/10/2764018.html