HTML5 画布：如何查询或修改底层位图尺寸而不是 DOM 元素尺寸？答案

【问题标题】：HTML5 canvas: how do I query or modify the underlying bitmap dimensions as opposed to the DOM element dimensions?HTML5 画布：如何查询或修改底层位图尺寸而不是 DOM 元素尺寸？
【发布时间】：2019-01-20 21:45:51
【问题描述】：

我正在使用 HTML5 画布元素：

<style>
    #myCanvas {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
</style>

 <canvas id="myCanvas" ontouchstart="..." />

我知道有一个底层位图，然后有一个 DOM 元素将这个位图装箱，并且这 2 个对象具有不同的尺寸，例如位图被缩放/挤压以适应 DOM 元素。如果位图尺寸总是等于 DOM 元素尺寸，我会更容易理解，但这不是它的工作原理。

如何查询各个维度？如何设置各自的尺寸？如何在 Chrome 开发者工具中查看 2 组维度？如何使两组维度保持同步？

这很重要，因为鼠标点击和手指触摸是在 DOM 坐标中传递的，但我们通常需要在画布坐标中解释它们。

（还有一个相关的问题：我做对了吗，将 DOM 元素设置为扩展到父级允许的最大尺寸？）。

【问题讨论】：

位图尺寸由元素的高度和宽度属性/属性定制。您说的是 CSSOM 大小，您只需忽略它...
使用 CSS h/w 来设置 CSS 样式可能会产生变形效果。 canvas.height 和 canvas.width 可能是要走的路，您可以查询您希望画布填充的元素并相应地设置画布尺寸。检查this thread（和this，当你在它的时候），如果你想调整它的大小，查看debouncing。
另外，如果您发布您想要完成的工作的草图或描述，我（或其他人）可以用相关示例来回答问题。

标签： html canvas coords

【解决方案1】：

获取画布底层位图的尺寸：

var w = canvas.width;
var h = canvas.height;

获取 DOM 元素的尺寸：

var w = canvas.clientWidth;
var h = canvas.clientHeight;

设置画布的底层位图：

canvas.width = 900;
canvas.height = 400;

要设置 DOM 元素的尺寸，这取决于 CSS 样式以及屏幕上的其他内容，这是一个更复杂的问题。

在 Chrome 的“开发者工具”中，Chrome 显示 DOM 元素尺寸，除了在命令行中输入“canvas.width”和“canvas.height”外，我找不到任何方法来获取画布底层位图尺寸.

至于尝试安排这样的 height==clientHeight 和 width=clientWidth ，我猜这是可能的，但它可能也很困难并且可能不受欢迎。

所以要将触摸动作或鼠标点击从 DOM 元素坐标映射到画布位图坐标，一个简单的缩放操作似乎就足够了：

function elementCoordsToCanvasCoords(X,Y)
{
    X = X * canvas.clientWidth / canvas.width;
    Y = Y * canvas.clientHeight / canvas.height;
    return [X,Y];
}

function onTouchStart(event)
{
    fingerStart(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
}

function fingerStart(X, Y)
{
    [X,Y] = elementCoordsToCanvasCoords(X,Y);
    ...
}

【讨论】：