HTML5 Canvas实战
4.3 缩放画布上下文
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

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

缩放画布上下文
图4-5 缩放画布上下文

绘制步骤

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

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赋一个负值,其结果是画布上下文在水平方向或垂直方向上发生翻转,创造出镜像变换的效果。

相关参考

  • 第5章 摆动的气泡

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验