canvas默认坐标系与当前坐标系

来源：未知 时间：2016-12-15 13:58 阅读数： 作者：xxadmin

[导读] canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。在默认坐标系中，每一个点的坐标都是直接映射...

canvas中的坐标是从左上角开始的，x轴沿着水平方向（按像素）向右延伸，y轴沿垂直方向向下延伸。左上角坐标为x=0，y=0的点称作原点。在默认坐标系中，每一个点的坐标都是直接映射到一个CSS像素上。

但是如果图像的每次绘制都参考一个固定点将缺少灵活性，于是在canvas中引入“当前坐标系”的概念，所谓“当前坐标系”即指图像在此时绘制的时候所参考的坐标系，它也会作为图像状态的一部分。比如rotate旋转操作，改变当前坐标系也就是改变了rotate的参考点，试想下如果没有当前坐标系的概念，无论是旋转，缩放，倾斜等操作不就只能参考画布左上角原点了吗。

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

默认坐标系如下图所示：

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(θ)

 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）替代。

更多文章推荐