4.3 缩放画布上下文

优质

小牛编辑

127浏览

2023-12-01

除了平移和旋转，HTML5的画布API还提供了缩放画布上下文的手段。本节，我们将使用scale()方法来按比例缩小画布上下文的高度。

绘制步骤

按照以下步骤，绘制一个按比例缩小的矩形：

1. 定义画布上下文，及矩形的尺寸：

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  var rectWidth  =  150;
  var rectHeight =  75;

2. 平移画布上下文，再把画布上下文的高度缩小50%：

  //把上下文平移到画布的中央
  context.translate(canvas.width  /  2, canvas.height  /  2);
  //把画布高度缩小一半
  context.scale(1,  0.5);

3. 绘制矩形，其中心位于画布上下文的左上角：

  context.fillStyle  = "blue";
  context.fillRect(-rectWidth  /  2,  -rectHeight  /  2, rectWidth, rectHeight);
};

4. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要缩放画布上下文，我们可以简单地使用缩放变换来实现：

context.scale(sx,sy);

在上下文的默认状态下，sx 和 sy参数的值均为1. 正如你所料，sx参数对应水平方向上的缩放比例，sy参数对应垂直方向上的缩放比例。

本节，通过把sy参数设置为0.5，我们把画布上下文在垂直方向上缩小50%。如果为sy参数赋一个大于1的值，则上下文将会在垂直方向上被拉伸。正如在下一节将要看到的，如果给sx 或 sy赋一个负值，其结果是画布上下文在水平方向或垂直方向上发生翻转，创造出镜像变换的效果。

4.3 缩放画布上下文

绘制步骤

工作原理

相关参考