Web前端高级工程师课程：Canvas状态管理变换操作详解.pptx

canvas变换

李伟

课堂目标

掌握上下文对象的状态的管理方法。

可以灵活使用变换操控图形。

知识点综述

上下文对象的状态管理

canvas变换

状态管理

状态管理，管理的是上下文对象的状态。

上下文对象的状态就是上下文对象的属性。比如描边颜色，填充颜色，投影，线条样式，变换信息…

管理上下文状态的方法有两个：

保存当前状态：save()

恢复上一次保存的状态：restore()

一般在我们绘制具备同一种样式的图形时，都会用save()restore()将其包裹起来。这是为了避免当前的图形样式影响以后所要绘制的的图形样式。

状态的嵌套

a-save()

b-save()

restore()–b

restore()–a

变换的本质是对canvas坐标系的操作

变换有3个特性：

移动：translate(x,y)

旋转：rotate(angle)

缩放：scale(x,y)

移动变换translate(x,y)

rotate(angle)

scale(x,y)

扩展-矩阵变换

相对变换矩阵：transform(a,b,c,d,e,f)

绝对变换矩阵：setTransform(a,b,c,d,e,f)

a,d：x，y轴向的缩放，默认为1

c,b：x，y轴向的倾斜，默认为0

e,f：x，y轴向的位移，默认为0

钟