translate(x, y)

将坐标系原点移动指定的距离

  ctx.translate(x, y)

参数

x Number 基于原始X坐标移动的距离

y Number 基于原始Y坐标移动的距离

测验

画一条线,(10,15)(80,100) 坐标原点未修改

移动原点到(x=30,y=20),再画一条线,(10,15)(80,100).然后再移动原点到(x=-40,y=-10),继续画这条线(红色的)

可以看到,每次调用translate(x, y),都是基于之前原点的(x,y)值加减得到的.这个例子,开始原点为(0,0)

然后变更到(0+30,0+20),再变更到(0+30-40,0+20-10).画红线时,原点坐标是(-10,10),线起点是(10,15)

所以看起来正好位于原始坐标的x=0位置.

可以试想一下,如果将画布右下角作为新原点,那么点(10,10)不会画在画布上.由于画布的原点是(0,0),从

左上角起始的,新坐标原点起始的画布范围,已经不在原画布上了.所以画不出来了.

简化坐标

活用这个功能,可以大幅减少复杂的坐标计算,由于基于(0,0)原点的计算是最简单的,所以利用此方法调整原点,可以达到简化坐标.

可以配合rotate()一起使用达到简化坐标计算目的

应用

数学里的平面直角坐标系的原点位于左下角,东面是x轴正方向北面是y轴正方向,如果要用canvas画出坐标系,并且按此原点位置习惯.

用translate()方法转换左下角为原点,x坐标不变,但y坐标要取负值.当然,可以做个自动转换.