canvas 转换常用的几种方法介绍，如下：

 

　　1.1 、scale - 缩放

 

　　使用语法：scale(x,y)

 

　　x：表示水平方向的缩放倍数

 

　　y：表示垂直方向的缩放倍数

 

　　eg：canvas 绘制的矩形框放大两倍，代码如下：

 

　　1.2、translate - 画布平移

 

　　使用语法：translate(x,y)

 

　　x：添加到水平坐标上的位置

 

　　y：添加到垂直坐标上的位置

 

　　设置之后开始绘制的图片位置从(x,y)算起。

 

　　eg：绘制两个一样的矩形，一个在平移前绘制，一个在平移后绘制，代码如下：

 

　　运行结果如图：

 

　　1.3 、rotate - 旋转

 

　　使用语法：rotate(angle)

 

　　angle 旋转弧度，如果想使用角度，可以把角度转成弧度，公式为：deg * Path.PI/180。

 

　　eg：将一个矩形旋转45度，代码如下：

 

　　运行结果如图：

 

　　根据上述结果我们发现旋转的时候，默认原点是画布的起始点，我们想要的旋转是在矩形框中心为原点的旋转，此时我们需要借助上translate平移，重置一下原点，修改上述代码为：

 

　　运行结果如图：

 

　　1.4、transform - 矩阵变换

 

　　使用语法：transform(a,b,c,d,e,f)

 

　　a:水平缩放

 

　　b:水平倾斜

 

　　c:垂直倾斜

 

　　d:垂直缩放

 

　　e:水平移动

 

　　f:垂直移动

 

　　transform可以替代前边平移、缩放、旋转三者，如下：

 

　　1.5、setTransform - 矩阵变换

 

　　setTransform()方法将变换的矩阵进行重置，它把当前的变换矩阵重置为单位矩阵使用语法：transform(a,b,c,d,e,f)

 

　　各参数说明：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动

 

　　setTransform() 方法把当前的变换矩阵重置为单位矩阵，然后以相同的参数运行 transform()。

 

　　drawImage() 在画布上绘制图像、画布或视频。也能够绘制图片的一部分，增加或减少图像的尺寸。以下是三种常见使用语法：

 

　　语法1：drawImage( img , x , y )

 

　　语法2：drawImage( img , x , y , width , height )

 

　　语法3：drawImage( img , sx , sy , swidth, sheight , x , y , width , height )

 

　　上述参数表示的意义如下：

 

　　eg：利用语法3，进行绘制图片的部分内容，实现如下效果：

 

　　给上述兔子顺便加一个点击屏幕暂停开始功能，完整代码如下：

 

　　eg：使用 canvas 画布处理视频，使用定时器绘制视频的当前帧，连续起来就是一个视频，需要注意的是必须处理暂停和开始播放两种操作，具体代码如下：

 

　　常见的像素级的操作有三种：

 

　　getImageData() - 获取画布像素数据

 

　　createImageData() - 创建新的、空白像素

 

　　putImageData() - 图像像素数据放回画布

 

　　3.1、getImageData

 

　　使用语法：getImageData( x , y , width , height )

 

　　x：要被提取的图像数据矩形区域的左上角 x 坐标。

 

　　y：要被提取的图像数据矩形区域的左上角 y 坐标。

 

　　width：被提取的图像数据矩形区域的宽度

 

　　height：被提取的图像数据矩形区域的高度

 

　　返回一个 imageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过像素表示，起点是( x , y )，宽高为 widht 和 height 。

 

　　imageData 对象包含三个属性：

 

　　imageData.height - 像素描述的矩形实际高度。

 

　　imageData.width - 像素描述的矩形实际宽度。

 

　　imageData.data - 包含 rgba 顺序数据的一个数组，数据使用0-255直接整数表示。

 

　　3.2、createImageData

 

　　使用语法：

 

　　创建一个空白的 imageData 对象，新对象的默认像素值 transparent black。对于imageData对象中的每个像素值，都存在 rgba 这四方面的信息，即：

 

　　r - 红色（0-255）

 

　　g - 绿色（0-255）

 

　　b - 蓝色（0-255）

 

　　a - alpha（0-255,0是透明，255是完全可见）

 

　　新对象默认像素值为（0,0,0,0）。

 

　　eg：如果我们想把 imageData 中一个像素变为红色时，可以改变第一和第四位信息，代码如下：

 

　　3.1、putImageData

 

　　使用语法：

 

　　参数及意义：

 

　　通过 getImageData 复制的指定矩形像素数据，编辑之后，通过 putImageData 方法将图像数据放回画布上。

 

　　eg：添加滤镜效果：上述兔子是白色的变换成红色兔子，这时需要把绿色和蓝色都设置成0即可，代码如下：