变形

状态的保存和恢复

sava()保存画布的状态

restore()恢复canvas状态

Canvas状态存储在栈中,每当save()方法被调用后,当前状态就被推到栈里保存

可以多次调用save()方法,每一次调用restore方法,上一个保存的状态就弹出,设定恢复

移动

它用来移动canvas和它的原点

translate(x,y) x是左右偏移量,y是上下偏移量

旋转
旋转基于原点为中心旋转 rotate(angle),以顺时针为方向,以弧度为单位

计算xy坐标:x = r*Math.cos(a); y = r*Math.sin(a)

缩放

scale(x,y)缩放画布水平和垂直的单位,可以为负,x为水平缩放因子,y为垂直缩放因子,如果比1小,会缩小图形,比1大,会放大图形,默认为1。

变形

transform(a,b,c,d,e,f)

如果任意一个参数是Infinity,变形矩阵也必须被标记为无限大,否则异常

a:水平方向的缩放

b:竖直方向的倾斜偏移

c:水平方向的倾斜偏移

d:竖直方向的缩放

e:水平方向的移动

f:竖直方向的移动

setTransform(a,b,c,d,e,f)将当前的变形矩阵重置为单位矩阵,然后相同参数调用transform方法

resetTransform()重置当前变形为单位矩阵。

组合

对于合成的图形,绘制顺序会有限制。可以利用 globalCompositeOperation属性改变,clip可以允许我们隐藏不想看到的部分图形

globalCompositeOperation=type  设定了在画新图形时采用的遮盖策略

详细可以百度一下更加详细,这里只做陈列了

①souce-over  默认设置

在现有画布上下文之上绘制图形

②souce-in

新图形旨在新图形和目标画布重叠的地方绘制,其他地方透明

③souce-out

在不与现有画布内容重叠的地方绘制新图形

④souce-atop

新图形只在与现有画布内容重叠的地方绘制

⑤destination-over 

在现有的画布内容后绘制新的图形

⑥destination-in

现有的画布内容保持在新图形和现有画布内容重叠的地方,其他地方透明

⑦destination-out

现有内同保持在新图形不重叠的地方

⑧destination-atop

现有的画布只保留与新图形重叠的部分,新的图形是在画布内容后面绘制的

⑨lighter

两个重叠图形的颜色通过颜色值相加确定

⑩copy

只显示新图形

11:xor

图像中,重叠和正常绘制外的其他地方透明

12:multiply

顶层像素与底层相应像素相乘(更黑暗)

13:screen

像素被倒转,相乘,再倒转  (更明亮)

14:overlay

multiply和screen结合,暗的地方更暗,亮的地方更亮

15:darken

保留两个图层中最暗的像素

16:lighten

保留两个图层中最亮的像素

17:color-dodge

将底层除以顶层的反置

18:color-burn

将反置的底层除以顶层,结果又反过来

19:hard-light

屏幕相乘,上下图层互换

20:soft-light

顶层减去底层或者相反得到一个正值

21:difference

柔和版的强光,纯黑或者纯白不会导致纯黑或纯白

22:exclusion

和difference相似,但对比度较低

23:hue

保留了底层的亮度和色度,采用了顶层的色调

24:saturation

保留了底层的亮度和色度,采用了顶层的色度

25:color

保留了底层的亮度,同时采用了顶层的色调和色度

26:luminosity

保持底层的色调和色度,同时采用顶层的亮度

裁切路径

它的作用是 遮罩,用来隐藏不需要的部分。

使用clip()方法创建一个新的裁切路径

默认情况下,canvas有一个与他自身一样大的裁切路径(没有裁切效果)