Невозможно получить правильную позицию движения мыши или высоты холста при использовании холста, размер которого можно изменить

Question

Я разрабатываю игру, и я изо всех сил стараюсь поместить изображение внизу холста с шириной столбца начальной загрузки. Но он никогда не возвращает истинную высоту холста для меня, чтобы расположить изображение в нижней части холста.

 <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);
}

Но он всегда рисует изображение вне холста, которое я не вижу. когда я тестировал с жестко закодированной осью Y, которая меньше 150, это работает.

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

Я также перемещаю положение изображения на основе события mousemove и вычисляю новую координату x / y, используя evt.clientX - rect.left или evt.clientY - rect.top, что никогда не является правильным. Но если я получаю высоту холста, используя canvas.getBoundingClientRect (). Height, то всегда больше 150 и около 391. Не уверен, как мне получить реальную высоту.

Answer 1

canvas. getBoundingClientRect () возвращает значения, основанные на области просмотра, а не фактическую высоту и ширину холста.

Чтобы получить фактическую высоту и ширину холста, просто используйтеcanvas.height и canvas.width. Вы можете посмотреть на этот вопрос , чтобы понять, почему это так.

Для событий мыши вам нужно рассчитать проценты, чтобы справиться с изменением размера холста.

Пример:

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;