javascript - 使用可调整大小的 Canvas 时无法获得正确的鼠标移动位置或 Canvas 高度

Question

我正在开发一款游戏，我正在努力将图像放置在具有 Bootstrap 列宽度的 Canvas 底部。但它永远不会返回 Canvas 的真实高度，让我将图像定位在 Canvas 的底部。

 <div id="game" class="mt-10">
    <div id="gameContainer" class="container-fluid">
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
        <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg> <!-- Give this div your desired background color -->
        <div class="container">
            <div class="row text-center  justify-content-center">
                <div class="col-md-2">
                </div>
                <canvas id="gameArea" class="col-md-8"
                    style="border:1px solid blue !important;padding: 0 !important;margin: 0 !important;">
                </canvas>
                <div class="col-md-2">
                    <button class="btn btn-secondary" id="stopGame">Stop Game</button>

                </div>
            </div>
        </div>
    </div>
</div>

在我的 javascript 代码中，我尝试使用以下代码放置图像。

let canvas = document.getElementById("gameArea");
let ctx = canvas.getContext("2d");
let bowlImage = new Image();
bowlImage.src = 'images/icon.png';
bowlImage.onload = function () {
ctx.drawImage(bowlImage, 0, canvas.getBoundingClientRect().height - 20, 20, 20);
}

但它总是在我看不到的 Canvas 外绘制图像。当我使用低于 150 的硬编码 y 轴进行测试时，它可以正常工作。

ctx.drawImage(bowlImage, 0, 120, 20, 20);

我也根据 mousemove 事件移动图像的位置，我使用 evt.clientX - rect.left 或 evt.clientY - rect.top 计算新的 x/y 坐标，这是永远不正确的。但是如果我获取高度使用 canvas.getBoundingClientRect().height 的 Canvas 的高度，它总是超过 150 并且在 391 左右。不确定我如何获得真实高度。

Answer 1

Canvas 。 getBoundingClientRect()返回基于视口(viewport)的值，而不是 Canvas 的实际高度和宽度。

要获得 Canvas 的实际高度和宽度，只需使用canvas.height 和canvas.width。你可以看看this question以帮助理解这是为什么。

对于鼠标事件，需要计算百分比来处理 Canvas 大小的调整。

例子:

var rect = canvas.getBoundingClientRect();
var widthScale = canvas.width / rect.width;
var heightScale = canvas.height / rect.height;
// where 'e' is the click event
var canvasClickX = (e.clientX - rect.left) * widthScale;
var canvasClickY = (e.clientY - rect.top) * heightScale;