canvas详解05-变形

简介: canvas详解05-变形

几何变换

canvas现在被大量地运用于游戏等动画领域,最主要的归功于它提供的一系列几何变换方法,使得动画更加地容易。所以其几何变换是非常重要的一节。

在本教程前面的部分中,我们已经了解了 Canvas 网格和坐标空间。到目前为止,我们只是根据我们的需要使用默认的网格,改变整个画布的大小。变形是一种更强大的方法,可以将原点移动到另一点、对网格进行旋转和缩放。

#状态的保存和恢复 Saving and restoring state

在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法。

save()

保存画布 (canvas) 的所有状态

restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas 状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。一个绘画状态包括

_揽
+关注
目录
打赏
0
1
2
0
572
分享
相关文章
canvas系列教程06 ——边界检测、碰撞检测
canvas系列教程06 ——边界检测、碰撞检测
81 2
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
73 3
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
192 1
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
canvas图像阴影处理
canvas图像阴影处理
canvas图形操作(缩放、旋转、位移)
canvas图形操作(缩放、旋转、位移)
canvas详解09-像素操作
canvas详解09-像素操作
144 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等