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) 

html5 canvas translate()方法理解记录_第1张图片

 

这就是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

你可能感兴趣的:(html5 canvas translate()方法理解记录)