canvas 的 transform与settransform translate scale

translate

context.translate(x,y):

移动坐标原点到 (x,y);

原点默认值在canvas 左上角;

context.translate(500,400)

context.beginPath()
context.moveTo(0,0)
context.lineTo(500,0)
context.moveTo(0,0)
context.lineTo(0,400)
context.stroke()

 

scale

 scale(x,y) 缩放 比例 x方向 和 y方向

*缩放的是坐标 决定一个坐标相当于几个像素

ratate

rotate(弧度值):坐标轴绕原点旋转的弧度;(Math.PI 等于 π  π是180度的弧度值)

transform 与 setTransform

* transform(a,b,c,d,e,f);重复使用 会相对于上次transform进行变换

* setTransform(a,b,c,d,e,f);重复使用 只会相对与同一个原型变换(默认:坐标原点在canvas 左上角)进行变换,

* a:x轴 缩放

* b:x轴 倾斜

* c:y轴 倾斜

* d:y轴 缩放

* e:x轴 平移

* f:y轴 平移