在不减小其宽度和高度的情况下调整 Canvas 的大小（坐标）答案

【问题标题】：Re-size Canvas without reducing its width and height (Coordinates)在不减小其宽度和高度的情况下调整 Canvas 的大小（坐标）
【发布时间】：2015-07-14 22:32:47
【问题描述】：

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

画布的实际尺寸是 - 460 ,550 在移动窗口模式下约为 250,350

我使用了以下样式

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

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

【问题讨论】：

你在html的
你说的是 HTML5 canvas 标签吗？请发布您的 HTML。
是我的 Canvas HTML5 -
我可以通过应用响应式 css 来正确调整画布的大小。问题是当重新调整画布大小时，坐标会出错。早些时候，最大坐标是 (460,550)。调整大小后，它变成了 250,350 左右。

标签： javascript jquery css html canvas

【解决方案1】：

画布渲染表面的尺寸与画布标签的尺寸无关。

例如：

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

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

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

setAttribute("height", "500");

【讨论】：

我可以通过应用响应式 css 来正确调整画布的大小。问题是当重新调整画布大小时，坐标会出错。早些时候，最大坐标是 (460,550)。调整大小后，它变成了 250,350 左右。