【原创】 【HTML】【学习】 Canvas学习笔记【中】_html/css_WEB-ITnose

5、保存和恢复Canvas状态

        context.save();

        context.restore();

save可以将当前的状态暂时得存入堆中，而restore则可以读取堆中存储的状态

他们都不需要任何参数

当开始绘制一张图时，如果之前已经有图形，记得使用save保存当前的状态

6.1、坐标空间

在canvas中，坐标空间默认为画布左上角为（0，0）为原点，x轴水平向右为正向，角度为0

y轴垂直向下为正向角度为π/2，

绘制图形时，可以使用translate（）方法移动坐标空间

trantslate()接受2个参数，代表原点偏移的量，如trantslate(100,100)

将绘图的基准点分别向右及向下偏移100px

移动坐标空间在批量绘制图形时很有用处

        你的浏览器不支持canvas

以上代码运行后在画布上绘制了若干个大小不等，颜色渐变的矩形：

代码解释：

这里建立了2个函数，draw()函数使用循环连续绘制图形

同时将绘图需要的参数传递给另一个函数drawH(),由drawH()函数完成矩形的绘制

在draw()函数的循环体中，每一次调用drawH函数，都要进行一次save()，restore()和一次

teantslate()重定位

6.2 旋转坐标空间

context.rotate(angle);

rotate只有一个参数，即旋转角度angle，旋转角度一顺时针方向为正方向，以弧度为单位，从

x轴右方向开始旋转

修改6.1的代码，可以得到以下图形：

7.缩放图形

scale()方法用于增减Canvans上下文对象中的像素数目，从而实现图形或位图的大小或缩放

context.scale(x,y)

x为横轴缩放因子，y为纵轴缩放因子，使用大于1的数作为缩放因子，将放大图形

使用0～1之间的数作为缩放因子，将缩小图片

在这个图形中，使用scale(0.95,0.95)对原图形进行了60次缩放，具体代码如下：

你的浏览器不支持canvas特效！点我绘制图形

代码解释：

上面的代码中，使用了一个按钮，设定其触发事件为运行函数showScalePrint()

在函数showScalePrint()中，定位原点在(400,300)

设定oScalePrint的填充样式，进行60次循环，完成了上面的图形

7、矩阵变换

使用transform方法用于直接对变形矩阵作修改，即进行矩阵变换

context.transform(m11,m12,m21,m22,dx,dy)

原理是用变换矩阵和context原来的坐标(x,y)相乘，得到新的坐标

transform的变换矩阵表示为：

m11 m21 dx

m12 m22 dy

0 0 1

transform方法使用这个矩阵和原坐标的矩阵相乘

x

y

l

关于矩阵的乘法，遵循如下算法：

1：当矩阵A的列数等于矩阵B的行数时，A与B可以相乘。

2：矩阵C的行数等于矩阵A的行数，C的列数等于B的列数。

3：乘积C的第i行第j列的元素等于矩阵A的第i行的元素与矩阵B的第j列对应元素乘积之和。

根据以上算法，得到新的坐标矩阵为

(m11)x+(m21)y+dx

(m12)x+(m22)y+dy

1

即：

xNew = (m11)x+(m21)y+dx

yNew = (m12)x+(m22)y+dy

使用transform方法，只要设定特定的参数，就可以取代translate、scale、rotate等方法

第一眼看到矩阵变换，真是晕头转向，但只要研究足够深入，很快就会喜欢这种方法

用一条语句完成图形的移动、缩放和旋转！