canvas详解05-变形

简介: canvas详解05-变形

几何变换

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

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

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

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

save()

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

restore()

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

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

目录
相关文章
|
1月前
|
前端开发
|
1天前
|
前端开发
canvas图像阴影处理
canvas图像阴影处理
6 0
|
1天前
|
前端开发
canvas图形操作(缩放、旋转、位移)
canvas图形操作(缩放、旋转、位移)
7 0
|
1月前
|
前端开发 JavaScript 搜索推荐
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
34 1
webgl canvas系列——animation中基本旋转、平移、缩放(模拟冒泡排序过程)
|
1月前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
54 1
|
1月前
|
前端开发
canvas详解06-合成
canvas详解06-合成
39 2
|
存储 前端开发 算法
canvas 处理图像(下)
canvas 处理图像(下)
canvas 处理图像(下)
|
前端开发
canvas绘制五角星
canvas绘制五角星
149 0
|
存储 移动开发 前端开发
canvas 处理图像(上)
canvas 处理图像(上)
|
前端开发 JavaScript
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备
741 0
canvas中的拖拽、缩放、旋转 (上) —— 数学知识准备