JS学习-Canvas-Transformations变换
2024-10-21 11:58:59
Canvas -Transformations变换
save()
保存画布(canvas)的所有状态
restore()
是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态,将 canvas 恢复到最近的保存状态的方法。
Canvas状态存储在栈中,每当save()方法被调用后,当前的状态就被推送到栈中保存。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillRect(0,0,150,150); // 使用默认设置绘制矩形1
ctx.save(); // 保存默认状态
ctx.fillStyle = '#09F' // 在原有配置基础上对颜色做改变
ctx.fillRect(15,15,120,120); // 使用新的设置绘制矩形2
ctx.save(); // 保存当前状态
ctx.fillStyle = rgba(255,255,255,0.5); // 再次改变颜色配置
ctx.fillRect(30,30,90,90); // 使用新的配置绘制矩形3
ctx.restore(); // 重新加载之前的颜色状态(同色2)
ctx.fillRect(45,45,60,60); // 使用上一次的配置绘制矩形4
ctx.restore(); // 加载默认颜色配置(同色1)
ctx.fillRect(60,60,30,30); // 使用加载的配置绘制矩形5
}
translate
translate(x, y)
:translate方法接受两个参数。x 是左右偏移量,y 是上下偏移量
rotate
rotate(angle)
: 这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。
scale
scale(x,y)
: scale 方法可以缩放画布的水平和垂直的单位。
transform
transform(a,b,c,d,e,f)
: 这个方法是将当前的变形矩阵乘上一个基于自身参数的矩阵
参数 | 描述 |
---|---|
a(m11) | 水平方向的缩放 |
b(m12) | 竖直方向的倾斜偏移 |
c(m21) | 水平方向的倾斜偏移 |
d(m22) | 竖直方向的缩放 |
e(dx) | 水平方向的移动 |
f(dy) | 竖直方向的移动 |
setTransform(a,b,c,d,e,f)
: 这个方法会将当前的变形矩阵重置为单位矩阵,然后用相同的参数调用 transform方法。resetTransform()
: 重置当前变形为单位矩阵,它和调用以下语句是一样的:ctx.setTransform(1, 0, 0, 1, 0, 0);
最新文章
- CH模拟赛 拆地毯
- Android IOS WebRTC 音视频开发总结(八十一)-- WebRTC靠谱吗?有没有适合的SDK推荐?
- 周末充电之WPF(四).多窗口之间操作
- Windows平台下Qt开发环境的搭建
- A simple test
- zabbix 发送邮件配置
- popOver 弹出框简单使用
- python---协程 学习笔记
- 详解QT5.10.0搭载OpenCV3.4.0环境配置步骤说明
- python爬取珞珈1号卫星数据
- 【公众号系列】SAP HANA 平台的优势
- 容易被误读的IOSTAT
- sass—使用自定义function和@each实现栅格布局
- SAP MM 物料主数据采购视图中的字段'Var. OUn'的作用?
- python数据结构与算法第十天【插入排序】
- Linux下RocketMQ环境的配置
- mapReducer第一个例子WordCount
- eclipse快捷键(增加一些4连组合快捷键)
- Eureka集群试验的一点总结
- Springboot热部署(热部署原理)和用IDEA开发需要的配置