Javascript 使用画布调整大小'；谁的身份证？

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

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

---

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

首先，一个好的开始不是占用整个页面的宽度，而是一个

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的纵横比大小调整。它没有文档记录，可能不适合您的需要，但它可以给您一些想法