javascript - 调整 Canvas 大小而不减少其宽度和高度(坐标)

Question

我在 Canvas 上画了一张图，根据用户鼠标点击画了一些点。我使用数学计算以便在用户将鼠标悬停在工具提示上时在图片中显示一些面板名称。我使用 Canvas 坐标和缩放百分比。我的问题是当我将窗口大小调整为更小的窗口(我使用 Mozilla 响应模式移动设备)时，它给出了错误的坐标。

Canvas 的实际大小是 - 460 ,550在移动窗口模式下约为 250,350

我使用了以下样式

#splatExteriorImage {
    background-image: url(../images/SPLAT1.jpg);
    background-size: cover;
    z-index: 0;
    background-color: #F5F5F5;
}

如何在不减少坐标的情况下调整 Canvas 大小。提前致谢，

Answer 1

Canvas 渲染表面的尺寸独立于 Canvas 标签的尺寸。

例如:

<canvas width=400 height=300 style="width: 800px; height: 600px;"></canvas>

您可以独立于 CSS 中的高度更改绘图表面的宽度和高度。

要专门更改渲染表面的高度，请使用

setAttribute("height", "500");