1

您可以使用画布 id 的 html 中的样式将画布调整为页面宽度吗？

然后在画布的 js 中根据当前画布的大小调整侦听器的大小？

我有很多变量和听众硬编码只是想知道解决这个问题的最快方法是什么:)

4

1 回答 1

0

首先，一个好的开始不是采用整个页面宽度，而是一个div容器。这样，如果您最终将您的应用程序放在网站或任何地方，您的代码将适应任何容器。如果您希望它成为整页，则此容器可以是 100% 的绝对宽度/高度，没有填充/边距。

另请注意，画布有两种尺寸：

  • HTML 大小，这是您将“以编程方式”绘制的大小
  • CSS 大小，它将显示的大小，独立于其他大小（它会调整它的大小，导致潜在的扭曲）

基于此，您可以使用 jquery$("#myID").width()或知道元素的屏幕宽度height()，这也适用于画布。基于此，您可以在 html 和/或 css 中设置所需的任何大小：

$("#myCanvas").width = 400; // The size you will draw on
$("#myCanvas").css('width', '800'); // The size it will be displayed (2x scale in X in that case)

然后，对于调整大小，您有多种解决方案：

  • CSS 完全拉伸：您可以使用您想要编码的任何尺寸的画布，然后在 CSS 中调整它的大小以使用整个页面宽度，这基本上是将 css 置于 100% 宽度/高度
  • CSS 用纵横比拉伸：我最喜欢的解决方案，包括在 CSS 中调整画布的大小，但保持原始应用程序的纵横比（并在屏幕的其余部分放置黑色边框，就像在大屏幕电影中一样）
  • 纯画布调整大小：这种方法不会破坏图形，但它的代价是让您认为所有绘图都具有任何尺寸。您必须根据屏幕大小将所有绘图大小和位置相乘，而不是拥有一个由浏览器调整大小的固定大小的画布，如果在开发中不尽快考虑的话，这最终会变得非常无聊和有问题。

这里的一个例子是我的画布管理器，用 CSS 纵横比调整大小。它没有记录，可能不适合您的需要，但它可以给您一些想法

于 2013-07-16T14:58:05.263 回答