1. 程式人生 > >canvas圖形變換

canvas圖形變換

1.translate(x,y)——位移,位移會產生疊加,所以在進行下一次位移之前要清除前面已產生的位移,canvas提供了另外一種方法,就是在繪製之前用save()儲存一下之前的狀態,然後繪製完之後用restore()恢復到之前儲存的狀態。

2.rotate(deg)——旋轉

3.scale(sx,sy)——縮放,縮放要注意不僅大小縮放了,所有的位置包括線條的寬度都會進行縮放。

4.transform(a,b,c,d,e,f)——變換矩陣,可以實現前面三種方法的效果。它有疊加的效果,所以後面的transform都是基於上一次的transform進行變換的,所以要注意,如果不想產生疊加效果,可以使用setTransform(a,b,c,d,e,f)方法,該方法會忽略前面設定的所有transform方法,只使用setTransform(a,b,c,d,e,f)設定的引數

  • a,d——水平、垂直縮放
  • b,c——水平、垂直傾斜
  • e,f——水平、垂直位移