复习
上节课，我们学习了状态的保存和恢复。状态保存使用方法save()，状态恢复使用方法restore()。状态被保存在了一个栈里面。
可以保存的状态主要有两类，第一类是基本样式，第二类是操作后结果，包括变形，移动，剪切路径等。其中操作后结果我们没有学习过。
学习canvas原点的移动
问：我们可以改变canvas的原点吗？
答： 当然可以，听我细细道来。
截止目前为止，我们学习过的canvas坐标系，都是原点在canvas的左上角，今天开始，我们学习如何改变canvas原点的位置。
想要改变要点的位置，我们就要用到translate(x,y)接口。translate接受两个值，x表示向左右的偏移量，正数代表向右便宜，负数代表向左便宜；y代表上下的偏移量，正数代表向下便宜，负数代表向上便宜。
问：可以举个移动原点的例子吗？
答：可以。如下：
<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 200,200) // 原点处画了一个200*200的矩形
ctx.translate(200, 200)
ctx.fillStyle = 'blue'
ctx.fillRect(0, 0, 200,200) // // 原点处画了另一个200*200的矩形
</script>
在上面的例子中，我们首先在400的正方形canvas原点处画了一个长200的红色正方形。然后将原点移动到了canvas的正中心，再以原点为中心画了一个200的蓝色正方形。我们可以看到，两个正方形虽然都是以原点为中心，但是他们的位置却发生了变化。
问：改变原点后，它的坐标系发生了什么变化？
答：在没有改变canvas的原点之前，我们在canvas的坐标系中，只有正数，移动原点后，canvas的平面中就会出现一个完整的坐标系。不过这个坐标系中，y轴的方向需要注意，它向上为负，向下为证。
问：可以举个例子吗？
答：可以。我们还是继续把上面移动原点的代码移下来，然后在新的坐标系上举例子。
<canvas width="400" height="400" id="mycanvas"></canvas>
<script>
const canvas = document.getElementById('mycanvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 200,200) // 原点处画了一个200*200的矩形
ctx.translate(200, 200)
ctx.fillStyle = 'blue'
ctx.fillRect(0, 0, 200,200) // 原点处画了另一个200*200的矩形
ctx.fillStyle = 'yellow'
ctx.fillRect(-200, -200, 200,200) // 在新原点的基础上，画一个200*200的矩形覆盖掉就原点处的矩形
</script>
如上，在已有的基础上，我们在新的原点基础上，在（-200，-200）处建了一个新的坐标系。
致此，我们已经学会了移动原点，留个实践作业，将状态的恢复保存和原点的移动结合起来，做一个demo。
本文实现结果可以点击我查看
