说说 Canvas 的缩放功能

╰半夏微凉° 2022-11-30 04:11 197阅读 0赞

使用 scale() 方法可以缩放当前绘图。语法：`context.scale(scalewidth,scaleheight);`。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>scalewidth</td> 
   <td>缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)</td> 
  </tr> 
  <tr> 
   <td>scaleheight</td> 
   <td>缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, 依次类推)</td> 
  </tr> 
 </tbody> 
</table>

context.strokeRect(5,5,25,15);
    context.scale(2,2);
    context.strokeRect(5,5,25,15);
    context.scale(2,2);
    context.strokeRect(5,5,25,15);
    context.scale(2,2);
    context.strokeRect(5,5,25,15);

运行结果：

![format_png][]

可以看出，Canvas 缩放的方式与旋转差不多。因为我们没有平移原点就对长方形进行缩放，所以 Canvas 仍然使用画布左上角来作为画布的原点，所以每次放大后的正方形都移动到了右下方。

如果需要从长方形的中心点进行缩放，就必须在缩放之前先将原点平移到长方形的中心。

translate() 方法可以重新指定画布上的原点 (0,0) 位置。语法：`context.translate(x,y);`

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>x</td> 
   <td>新原点的水平坐标（x）</td> 
  </tr> 
  <tr> 
   <td>y</td> 
   <td>新原点的垂直坐标（y）</td> 
  </tr> 
 </tbody> 
</table>

const width = 25;
    const height = 15;
    
    context.translate(100+.5*width,100+.5*height);
    context.strokeRect(5,5,width,height);
    
    context.translate(-5-.5*width,-5-.5*height);
    context.scale(2,2);
    context.strokeRect(5,5,width,height);
    
    context.translate(-5-.5*width,-5-.5*height);
    context.scale(2,2);
    context.strokeRect(5,5,width,height);
    
    context.translate(-5-.5*width,-5-.5*height);
    context.scale(2,2);
    context.strokeRect(5,5,width,height);

运行结果：

![format_png 1][]

每次绘制时，都必须指定原点，否则都会从左上角作为默认原点。

[format_png]: /images/20221124/011109f3444e42bea6d08bcb15154dca.png
[format_png 1]: /images/20221124/f17314b198694d978178875918558c7c.png