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

157 阅读3分钟

复习绘制图像的擦除

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

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

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

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

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

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

学习状态的保存和恢复

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

问:什么是状态的保存

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

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

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

例如:

例如:

<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#e74478"
ctx.fillRect(0,0,200,200)
ctx.save() // 这样,状态就被保存了下来。
</script>

问: canvas的状态保存都可以保存那些状态,是不是也有不能保存的呢?

答:canvas可以保存的状态主要有基本样式和操作结果两种类型。

  • 基本样式有用来上色的两个style,包括strokeStyle和fillStyle。线条相关样式lineWidth,lineCap,lineJoin,miterLimit,阴影相关shawdowOffsetX,shawdowOffsetY,strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor,透明globalAlpha,还有globalCompositeOperation值,这个值我们目前还没学习,可以暂时有个印象就行。

  • 操作结果其实也是样式,因为操作后得留给人看嘛,不过我觉得讲他们分为操作结果会更加好点。主要有两个,当前应用的变形和裁切路径。这一块记下就行,我们马上就会学到。

问 :canvas的状态是怎么恢复的呢?

答:我们还是之前状态保存时的演算纸来举例子,你之前每一步验算的草稿纸都保存了起来,当你需要用到某一步时,你就需要把它取出来,你就得一张张的从上往下翻,知道找到那一步,然后从哪里重新开始,原先在那一步之后的就都遗弃掉了。这就是状态的恢复。具体来说就是canvas把每一个状态都存在了一个栈里面,每一个状态的使用都需要弹出后面压上去的状态。

可以举个状态恢复的例子吗?

答:可以,我们先把上面状态保存的例子抄下来,然后对状态进行状态恢复举例。

<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = "#e74478"
ctx.fillRect(0,0,200,200)
ctx.save() // 这样,状态就被保存了下来。
ctx.fillStyle = "blue"
ctx.fillRect(20,20,160,160)
ctx.restore() // 我们想使用前面的颜色,将它的状态进行恢复。
ctx.fillRect(40,40, 120,120)
</script>

到此,canvas的状态恢复与保存我们就都学完了。实现的效果可以点此查看

最后求阅读原文,支持一下