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

3,272 阅读3分钟

复习

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

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

最后支持一下,点击查看一下原文吧