7

JavaScript 动态调整 HTML5 Canvas 大小

 1 year ago
source link: https://www.fly63.com/article/detial/12606
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

更新日期: 2023-12-08阅读: 255标签: Canvas分享

扫一扫分享

如何在窗口大小改变时自动调整画布大小？

通常， html5 canvas元素能够动态更改大小以更好地适应当前窗口是很有用的，例如在运行全屏基于画布的浏览器游戏时窗口恢复向下时。本教程将讨论一种使用普通 JavaScript 来实现此目的的简单技术，特别关注我们希望画布尽可能大，同时适合调整大小的窗口的情况。请注意，本教程假设您对 HTML5 画布有基本的了解 - 如果您不熟悉它，请考虑查看本教程，了解画布的基本用法。

首先，我们需要确保画布上绘制的所有内容都使用画布宽度和/或高度的分数来调整大小和位置，而不是以像素为单位指定大小或位置。这样，在调整画布大小时，更容易保持相对间距和大小一致。

var circleX = canvas.width/16;
var circleY = canvas.height/8;
var circleRad = canvas.height/32;

如果我们在画布上写有任何文本元素，我们需要确保我们的字体大小也被指定为宽度和/或高度的分数。

var txtFnt = Math.round(canvas.height/32)+"px monospace";

现在，我们需要一种方法来检测窗口大小何时发生变化。我们可以使用window对象的addEventListener方法来做到这一点。

window.addEventListener("resize", resizeCanvas, false);

第一个参数指定正在侦听的事件类型，在本例中resize为窗口级别的事件。第二个参数指定发生此类事件时要调用的函数（我们将resizeCanvas很快定义我们的函数）。第三个参数useCapture确定有嵌套元素侦听同一事件时要使用的顺序。在我们仅指定一个侦听器的简单示例中，我们可以坚持使用默认false值。

现在，当调整窗口大小时，我们的resizeCanvas函数将被触发。在这个函数中，我们首先需要调整canvas.width和canvas.height参数以适应新窗口。虽然我们可以将它们设置为匹配窗口的新宽度和高度，但如果新窗口的宽高比与原始画布的宽高比显着不同，这可能会导致问题。相反，我们可以尝试在调整大小的画布中保持与原始画布相同的宽高比，因此画布上绘制的任何内容仍将按预期显示。

在下面的示例中，我们尝试最大化画布尺寸，同时保持 16:9 的宽高比。如果新窗口高度大于或等于新窗口宽度的 (9/16) 倍，那么我们知道我们可以将画布的宽度设置为等于窗口宽度，然后能够将画布的高度设置为(9/16)*canvas.width同时仍适合新窗口。否则，我们知道可用的窗口宽度必须大于新窗口高度的（16/9）倍，因此我们可以将画布高度设置为等于新窗口高度，然后将画布宽度设置为等于（16/9）倍高度。

function resizeCanvas() {
  //resize canvas
  if(window.innerHeight >= (9*window.innerWidth/16)) {
      canvas.width  = window.innerWidth;
      canvas.height = Math.floor(9*canvas.width/16);
  }
  else {
      canvas.height = window.innerHeight;
      canvas.width  = Math.floor(16*canvas.height/9);
  }
  ctx = canvas.getContext("2d");

如果我们想让画布尽可能多地使用初始窗口，同时保持我们选择的宽高比，那么当我们第一次定义画布时，我们也可以使用相同的技术。否则，如果我们根据像素数定义初始画布大小，则应确保函数中使用的比率与resizeCanvas初始画布大小的比率相匹配。

更新画布的宽度和高度后，我们仍然需要更新其他大小和位置变量以反映这些新值。我们可以将它们设置为与之前相同的比率（尽管这些比率现在将转换为不同的像素值），从而使这变得简单。

// update dependent variables
circleX = canvas.width/16;
circleY = canvas.height/8;
circleRad = canvas.height/32;
txtFnt = Math.round(canvas.height/32)+"px monospace";

最后，我们需要重新绘制画布上的所有内容以反映新的尺寸和位置。这可能就像使用修改后的大小和位置变量调用我们的各种自定义绘图函数来重新创建我们的图像一样简单，但所需的细节将根据我们的用例而有所不同。例如，如果我们的画布反映了依赖于用户输入的游戏状态，我们可能需要检查各种游戏状态变量的值以确定到底需要绘制什么。

// re-draw image
  drawCircle(circleX,circleY,circleRad);
  drawText(txtFnt);
} //end of resizeCanvas function

此时，我们的事件侦听器将自动检测窗口大小调整事件，并且resizeCanvas将触发我们的函数来更新画布的大小并重新绘制图像以适应新的大小。

链接: https://www.fly63.com/article/detial/12606


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK