使用Canvas的id调整大小？

Question

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

然后在你的js for canvas中根据当前时间画布的大小调整监听器的大小？

我的许多变量和听众都是硬编码的，只是想知道解决这个问题的最快方法是什么：）

Answer 1

首先，一个好的起点不是占用整个页面宽度，而是占用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中调整画布大小，但保持原始应用程序的宽高比（并在屏幕的其余部分放置黑色边框，如在大屏幕电影中）
• 纯画布调整大小：此方法不会破坏图形，但它的成本很高，让您可以考虑任何尺寸的绘图。您不必使用浏览器调整大小的固定大小的画布，而是必须根据屏幕大小将所有绘图大小和位置相乘，这最终会变得非常无聊，如果在开发过程中不尽快考虑则会出现问题。 / LI>

这里的例子是canvas manager，CSS纵横比调整大小。它没有记录，可能不适合您的需要，但它可以给你一些想法