使用画布调整大小's的id

Resizing using the Canvas's id?

本文关键字：id 布调整 调整      更新时间：2023-09-26

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

相关文章：