canvas详解05-变形

简介: canvas详解05-变形

几何变换

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

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

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

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

save()

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

restore()

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

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

目录
相关文章
|
6月前
|
前端开发
canvas绘制圆环
canvas绘制圆环
|
4月前
|
前端开发 JavaScript
canvas系列教程06 ——边界检测、碰撞检测
canvas系列教程06 ——边界检测、碰撞检测
45 2
|
4月前
|
前端开发
|
5月前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
|
5月前
|
前端开发
canvas图形操作(缩放、旋转、位移)
canvas图形操作(缩放、旋转、位移)
|
6月前
|
前端开发 JavaScript 搜索推荐
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
145 1
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
|
6月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
84 1
|
6月前
|
存储 前端开发 索引
canvas详解09-像素操作
canvas详解09-像素操作
129 1
|
6月前
|
前端开发
canvas详解07-裁剪
canvas详解07-裁剪
55 1
|
存储 前端开发 算法
canvas 处理图像(下)
canvas 处理图像(下)
canvas 处理图像(下)