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

复习

上节课，我们学习了状态的保存和恢复。状态保存使用方法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'