接触多了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)等等