canvas学习19之缩放

上节中我们学习了旋转，rorate(deg)。deg是旋转的度数，用弧度表示。在弧度和角度的转换公式是弧度=(Math.PI/180)*角度，对应的，我们可以求出角度的对应公式是角度=(180/Math.PI)*弧度

我们知道，对 canvas进行旋转，能够改变坐标轴的方向。今天，我们学习坐标轴的缩放，可以改变坐标轴上一个单位的大小 。

对坐标轴进行缩放需要使用scale(x,y)接口。x表示对x轴的缩放倍数，y表示轴的缩放倍数。当x或者y大于0小于1时，表示缩小改轴1个单位相应的倍数，当大于1时，表示该轴扩大的倍数。当x和y小于0时，首先会将原先的数据轴反转，然后按绝对值在相应的方向上缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<canvas width="400" height="400" id="mycanvas"></canvas>
<canvas width="400" height="400" id="mycanvas2"></canvas>
<canvas width="400" height="400" id="mycanvas3"></canvas>
<canvas width="400" height="400" id="mycanvas4"></canvas>
<script>
function testScale(id, x, y) {
  const canvas = document.getElementById(id)
  const ctx = canvas.getContext('2d')
  ctx.translate(200,200)
  ctx.scale(x, y)
  ctx.strokeStyle = '#e74478'
  ctx.beginPath()
  ctx.moveTo(0,0)
  ctx.lineTo(200,0)
  ctx.closePath()
  ctx.stroke()
  for(let i = 0; i < 10; i++) {
    ctx.beginPath()
    ctx.moveTo(i * 30,0)
    ctx.lineTo(i*30, -10)
    ctx.fillText(i*30, i*30 - 5, 10)
    ctx.closePath()
    ctx.stroke()
  }
  ctx.strokeStyle = '#00FFFF'
  ctx.beginPath()
  ctx.moveTo(0,0)
  ctx.lineTo(-200,0)
  ctx.closePath()
  ctx.stroke()
  for(let i = 0; i < 10; i++) {
    ctx.beginPath()
    ctx.moveTo(-i * 30,0)
    ctx.lineTo(-i*30, -10)
    ctx.fillText(-i*30, -i*30 - 5, 10)
    ctx.closePath()
    ctx.stroke()
  }
  ctx.strokeStyle = '#0000FF'
  ctx.beginPath()
  ctx.moveTo(0,0)
  ctx.lineTo(0,-200)
  ctx.closePath()
  ctx.stroke()
  for(let i = 0; i < 10; i++) {
    ctx.beginPath()
    ctx.moveTo(0, -i * 30)
    ctx.lineTo(10, -i*30)
    if (i !== 0) {
      ctx.fillText(-i*30, -30, -i*30 - 5)
    }
    ctx.closePath()
    ctx.stroke()
  }

  ctx.strokeStyle = '#FF00FF'
  ctx.beginPath()
  ctx.moveTo(0,0)
  ctx.lineTo(0,200)
  ctx.closePath()
  ctx.stroke()
  for(let i = 0; i < 10; i++) {
    ctx.beginPath()
    ctx.moveTo(0, i * 30)
    ctx.lineTo(10, i*30)
    if (i !== 0) {
      ctx.fillText(i*30, -30, i*30 - 5)
    }
    ctx.closePath()
    ctx.stroke()
  }
}

testScale('mycanvas', 1, 1)
testScale('mycanvas2',2, 2)
testScale('mycanvas3',0.5, 0.5)
testScale('mycanvas4',-1, -2)
</script>

在上面的例子中，我们做了四个canvas，第一个表示未经缩放的canvas，在上面画上了一个坐标轴，x轴和y轴的正负坐标都是0到200.canvas2是我们对坐标轴进行2倍扩大的坐标轴，canvas3是我们对canvas缩小了0.5倍的坐标轴，canvas4是我们对canvas进行了反转的坐标轴。

实现的可视化例子可以点此查看