HTML Canvas Scale() 方法：让你的图形更加灵活多变

引言

HTML Canvas 是一个非常强大的图形绘制工具，它可以让你在网页中绘制出各种各样的图形，包括线条、矩形、圆形、图像等等。而其中一个非常有用的方法就是 Scale()，它可以让你在绘制图形时进行缩放，从而让你的图形更加灵活多变。

Scale() 方法的基本用法

Scale() 方法用于缩放当前的坐标系，它的语法如下：

context.scale(scalewidth,scaleheight);

其中，scalewidth 和 scaleheight 是缩放因子，它们分别表示横向和纵向的缩放比例。例如，当 scalewidth=2，scaleheight=2 时，图形的大小就会放大两倍。

Scale() 方法的默认缩放中心点为左上角，也就是坐标系原点。如果你想要改变缩放中心点，可以先使用 Translate() 方法将坐标系移动到指定位置，然后再使用 Scale() 方法进行缩放。

Scale() 方法的实际应用

Scale() 方法的应用非常广泛，下面我们简单介绍几个常见的应用场景。

1. 绘制不同大小的图形

假设我们想要在 Canvas 上绘制两个矩形，一个较大，一个较小。我们可以使用 Scale() 方法来实现这个效果，代码如下：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,100);
ctx.scale(0.5,0.5);
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,100,100);

在这个例子中，我们首先绘制了一个红色矩形，然后使用 Scale() 方法将坐标系缩小了一半，接着绘制了一个蓝色矩形。由于缩放因子为 0.5，所以蓝色矩形的大小只有红色矩形的一半。

2. 绘制不同方向的图形

有时候我们需要绘制一些斜向的图形，比如一个倾斜的矩形或者一个旋转的图像。这时候就可以使用 Scale() 方法来改变坐标系的方向。

例如，假设我们想要绘制一个倾斜的矩形，代码如下：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,100,100);
ctx.scale(1,0.5);
ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,100,100);

在这个例子中，我们首先绘制了一个红色矩形，然后使用 Scale() 方法将坐标系在垂直方向上缩小了一半，接着绘制了一个蓝色矩形。由于缩放因子为 (1,0.5)，所以蓝色矩形在垂直方向上的大小只有红色矩形的一半。

3. 绘制放大镜效果

有时候我们需要在 Canvas 上实现放大镜效果，让用户可以放大某个区域的图像。这时候也可以使用 Scale() 方法来实现。

例如，假设我们有一张 800x600 的图片，我们想要在 Canvas 上显示它的一部分，并且可以进行放大操作。代码如下：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="image.png";
img.onload=function(){
  ctx.drawImage(img,0,0);
  ctx.translate(400,300);
  ctx.scale(2,2);
  ctx.drawImage(img,-400,-300);
}

在这个例子中，我们首先加载了一张图片，然后使用 DrawImage() 方法将它绘制在 Canvas 上。接着，我们使用 Translate() 方法将坐标系移动到图片的中心点，然后使用 Scale() 方法将坐标系放大两倍。最后，我们再次使用 DrawImage() 方法将图片绘制在 Canvas 上，由于我们将坐标系放大了两倍，所以图片看起来也被放大了两倍。