《HTML5 Canvas开发详解》——2.3 Canvas状态

本节书摘来自异步社区《HTML5 Canvas开发详解》一书中的第2章,第2.3节,作者: 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 Canvas状态

在Canvas上下文中绘图时可以利用所谓的绘图堆栈状态。每个状态随时存储Canvas上下文数据。下面是存储在状态堆栈的数据列表。

  • 变换矩阵信息,例如旋转或平移时使用context.rotate()方法和context.setTransform()方法。
  • 当前剪贴区域。
  • 画布属性的当前值,如下所示(但不限于)。
—globalAlpha
—globalCompositeOperation
—strokeStyle
—textAlign, textBaseline
—lineCap, lineJoin, lineWidth, miterLimit
—fillStyle
—font
—shadowBlur, shadowColor, shadowOffsetX, and shadowOffsetY

本章稍后会讲到这些状态。

2.3.1 什么不属于状态
当前路径(本章稍后将探讨)和当前位图(参见第4章)受Canvas上下文控制,不属于保存的状态。这个重要的功能允许在画布上对单个对象进行绘画和制作动画。2.7节“简单画布变换”将初始化Canvas状态,以将变换应用到当前建立和绘制的形状,同时保持画布其他部分不变。

2.3.2 如何保存和恢复Canvas状态
保存(推送)当前状态到堆栈,调用以下函数。

context.save()

调出最后存储的堆栈恢复画布,使用以下函数。

context.restore()
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值