我正在开发一款游戏,我正在努力将图像放置在具有 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 左右。不确定我如何获得真实高度。
最佳答案
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;
关于javascript - 使用可调整大小的 Canvas 时无法获得正确的鼠标移动位置或 Canvas 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58242505/