>

Canvas坐标系转变

- 编辑:正版管家婆马报彩图 -

Canvas坐标系转变

Canvas坐标系转换,canvas坐标系

暗中认可坐标系与当下坐标系

canvas中的坐标是从左上角起头的,x轴沿着水平方向(按像素卡塔 尔(阿拉伯语:قطر‎向右延伸,y轴沿垂直方向向下延长。左上角坐标为x=0,y=0的点称作原点。在默许坐标系中,每叁个点的坐标都以一贯照射到五个CSS像素上。

不过后生可畏旦图像的每便绘制都参照三个固定点将远远不够灵活性,于是在canvas中引进“当前坐标系”的定义,所谓“当前坐标系”即指图像在这个时候绘制的时候所参考的坐标系,它也会作为图像状态的一片段。比如rotate旋转操作,改动近期坐标系约等于改动了rotate的参谋点,试想下豆蔻梢头旦未有当前坐标系的概念,不论是旋转,缩放,偏斜等操作不就只好仿效画布左上角原点了呢。

注:以下的context均为 getContext("2d")所得的CanvasRenderingContext2D对象。

私下认可坐标系如下图所示:

图片 1

 1. 假使调用context.translate(100,50),当前坐标系与私下认可坐标系相对地点如下图

图片 2

2. 只要调用context.scale(2,2),当前坐标系与原暗许坐标系的刻度如下,杏黄代表当前坐标系

图片 3

3. 比方调用context.rotate(Math.PI/6)顺时针旋转30度,当前坐标系与暗中认可坐标系相对地方如下图

图片 4

 

 

 

矩阵转变transform

上文提到的坐标变形的三种形式,平移translate,缩放scale以及旋转rotate都能够经过transform做到。

当今我们先来拜望矩阵转变的定义:Context.transform(m11,m12,m21,m22,dx,dy),该方式运用几个新的转移矩阵与前段时间改换矩阵张开乘法运算。

m11 m21 dx
m12 m22 dy
0 0 1

 

1 平移context.translate(dx,dy)

图片 5

x’=x+dx

y’=y+dy

能够使用context.transform (1,0,0,1,dx,dy)取代context.translate(dx,dy)。

也得以运用context.transform(0,1,1,0.dx,dy)替代。

2 缩放context.scale(sx, sy)

图片 6

x’=sx*x

y’=sy*y

(其中,sx 和sy个别代表在x轴和y轴上的缩放倍数)

能够利用context.transform(sx,0,0,sy,0,0)代替context.scale(sx, sy);

也能够行使context.transform (0,sy,sx,0, 0,0)代替;

3 旋转context.rotate(θ)

图片 7

 x’=x*cosθ-y*sinθ

y’=x*sinθ+y*cosθ

可以用context.transform(Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180),-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),0,0)替代context.rotate(θ)。

也能够采纳context.transform(-Math.sin(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.cos(θ*Math.PI/180),Math.sin(θ*Math.PI/180), 0,0)替代。

默许坐标系与当下坐标系 canvas中的坐标是从左上角初步的,x轴沿着水平方向(按像素卡塔尔国向右延伸,y轴沿垂直...

本文由计算机操作发布,转载请注明来源:Canvas坐标系转变