canvas学习16之绘画状态的保留和回复

本文介绍了HTML5 Canvas中的状态保存和恢复概念,包括save()和restore()方法的使用,阐述了可以保存的基本样式如strokeStyle、fillStyle等,以及如何通过状态恢复实现绘图操作的撤销和重做。同时,文中通过实例演示了状态恢复的用法。
摘要由CSDN通过智能技术生成

复习绘制图像的擦除

上一节中,我们学习了图像的擦除。在生活中,在我们绘制图像的过程中,可能会因为失误或者想法的变化,对已经绘制好的部分要进行擦除,在canvas中,我们也完整实现了这样的擦除,当你对某一部分不满时,可以使用它进行擦除。canvas中的这个工具就是clearRect(x,y,width,height),这里面的四个参数分别代表如下含义:

1.x需要擦除矩形部分左上角的x坐标。

2.y需要擦除部分的左上角y坐标。

3.width需要擦除部分的宽度。

4.height需要擦除部分的高度。

需要记住的是,clearRect()擦除的是矩形区域,像圆形区域或者其它形状的,目前没有看到官方接口,有待我们探索,我觉的肯定是有变通方法的。

学习状态的保存和恢复

上一节我们学习了擦除,这一节我们来学习状态的恢复和保存。

问:什么是状态的保存

答:状态的保存就是把已经做好的设置保存起来,放到箱子里面去,留待日后再用。比如你要计算一到数学题,为了能够清楚的记得每一个步骤,采取了一个极端方法,每验算一步,你就把这张草稿纸保留下来,然后把所有的步骤都誊到另外一张草稿纸上接着做,这就是状态的保存。

问:说了这么多,canvas的状态到底应该怎么保存啊?

答:canvas的状态非常简单,当你需要保存某一个状态时,只需要调用save()方法,那么它之前的所有状态就都被保存了下来。</

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值