canvas学习17之如何改变canvas的原点

复习

上节课，我们学习了状态的保存和恢复。状态保存使用方法save()，状态恢复使用方法restore()。状态被保存在了一个栈里面。

可以保存的状态主要有两类，第一类是基本样式，第二类是操作后结果，包括变形，移动，剪切路径等。其中操作后结果我们没有学习过。

学习canvas原点的移动

问：我们可以改变canvas的原点吗？

答： 当然可以，听我细细道来。

截止目前为止，我们学习过的canvas坐标系，都是原点在canvas的左上角，今天开始，我们学习如何改变canvas原点的位置。

想要改变要点的位置，我们就要用到translate(x,y)接口。translate接受两个值，x表示向左右的偏移量，正数代表向右便宜，负数代表向左便宜；y代表上下的偏移量，正数代表向下便宜，负数代表向上便宜。

问：可以举个移动原点的例子吗？

答：可以。如下：

1
2
3
4
5
6
7
8
9
10
<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轴的方向需要注意，它向上为负，向下为证。

问：可以举个例子吗？

答：可以。我们还是继续把上面移动原点的代码移下来，然后在新的坐标系上举例子。

1
2
3
4
5
6
7
8
9
10
11
12
<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。

本文实现结果可以点击我查看