Canvas 缩放 scale()
缩放 (scale) 就是将一个图形围绕中心点，然后将宽和高分别乘以一定的因子(sx,sy)
但是，Canvas 中的缩放 (scale) 针对的不是绘制的图形，而是针对画布本身
画布缩放了，那么画在画布上的图形自然也就缩放了
例如刚开始的时候在 (100,100) 绘制一个 25x25 的矩形可能是这样的
灰色的底为画布(canvas)，绿色的边框为屏幕
当我们使用 scale(0.5,2) 将画布水平方向缩小一倍和垂直方向放大一倍的时候
这是什么意思呢？
就是原来水平方向的 1 个单位现在变成了 0.5 个单位了，垂直方向的 1 个单位现在变成了 2 个单位了
然后在 (100,100) 绘制一个 5x50 的矩形就是这样的了
- 首先矩形的大小不变，只是看起来变成了竖直的长方形了，而且
高/宽的比例看起来就是4/1 - 矩形的左上角距离画布的原点(0,0) 的实际实际距离没变，但看起来其实是垂直方向移动了一倍距离而水平方向缩小了一半距离
- 最大的直观感受就是矩形的左上角距离屏幕的左上角位置变化了，水平方向缩小了一半距离，垂直方向方法了一半距离
Canvas scale()
ctx.scale() 将 canvas 水平方向和垂直方向的单位各乘以一定的因子(sx,sy)
从某些方面说, scale() 缩放的不是画布，而是画布上 1 个单位的距离
语法
void ctx.scale(sx, sy);
| 参数 | 说明 |
|---|---|
| dx | 水平方向的缩放因子 |
| dy | 垂直方向的缩放因子 |
dx 和 dy 的值可以是负数，负数是啥意思呢？就是想把整个 canvas 镜像，然后再缩放
范例
下面的范例先在点 (50,50) 绘制一个橘黄色的 100x50 的矩形，然后缩放画布 canvas (0.5,2) 最后在点 (50,50) 绘制一个 100x50 的绿色矩形
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); ctx.fillStyle="orange"; ctx.fillRect(50,50,100,50); ctx.scale(0.5,2); ctx.fillStyle="green"; ctx.fillRect(50,50,100,50); </script>
运行结果如下
范例 2
如果缩放因子是负数，那么先镜像 (也就是先翻转)，然后再缩放
- 如果 sx 是负数，则先按照 Y 轴镜像，然后再缩放
- 如果 sy 是负数，则先按照 X 轴镜像，然后再缩放
下面的范例先在点 (50,50) 绘制一个橘黄色的 100x50 的矩形，然后缩放画布 canvas (-0.5,2) 最后在点 (50,50) 绘制一个 100x50 的绿色矩形
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-2" width="400" height="00"> </canvas> <script> var c = document.getElementById("canvas-2"); var ctx = c.getContext("2d"); ctx.fillStyle="orange"; ctx.fillRect(50,50,100,50); ctx.scale(-0.5,2); ctx.fillStyle="green"; ctx.fillRect(50,50,100,50); </script>
运行结果如下
哎呀，为什么绿色的没掉了呢？因为，因为垂直镜像了之后，x 轴正方向已经从水平向左改成水平向右了
如果此时还在 (50,50) 的位置画画，肯定是看不到啊，因为它已经跑到另一边去了，而屏幕的位置没变啊，于是就看不到了
如果此时还要看到它，就要把绘制起始点的 x 坐标也镜像下，然后再 x 2 就是变成 (-50)x2=-100 就好了
如果不 x 2 ，结果还是看不到的，因为 -50 也只是把矩形往右移动了 50 像素，到哪里了？ 贴边了...
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-3" width="400" height="300"> </canvas> <script> var c = document.getElementById("canvas-3"); var ctx = c.getContext("2d"); ctx.fillStyle="orange"; ctx.fillRect(50,50,100,50); ctx.scale(-0.5,2); ctx.fillStyle="green"; ctx.fillRect(-100,50,100,50); </script>
运行结果如下