Canvas 对象定位问题 - JS

Question

我认为有一些错误。

从视觉上看，按钮会离开 SCREEN，而不是留在原处。问题是 canvas 对象的 X 定位，即 '<button>'，当您从 LEFT[=34= 调整浏览器 window 大小时，它会移出屏幕] 但在从 RIGHT window 调整浏览器大小时，按钮也会 NOT MOVE 和 STAYS IN ITS PLACE .

本质上，canvas 对象 'button' 应该固定在一个地方，这样无论我的浏览器 window 有多大或多小，它都在同一个地方。

还有一个可重现的演示。

var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); var the_button = document.getElementById("the_button"); var the_background = document.getElementById("the_background"); var button_imageLeft = 1100; var button_imageBottom = 150; var button_imageWidth = 170; var button_imageHeight = 100; var button_offsetX, button_offsetY; window.onload = function() { ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height); drawButton(); } initialize(); function initialize() { window.addEventListener('resize', resizeCanvas, false); resizeCanvas(); } function drawButton() { button_offsetX = button_imageLeft; button_offsetY = canvas.height - button_imageBottom; ctx.drawImage(the_button, button_offsetX, button_offsetY, button_imageWidth, button_imageHeight); } function redraw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height); drawButton(); } function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; redraw(); } the_button_function = (event) => { const { x, y } = event; if ((x >= button_offsetX && x < (button_offsetX + button_imageWidth)) && (y >= button_offsetY && y < (button_offsetY + button_imageHeight))) { alert("<Button>") } } canvas.addEventListener('click', (e) => the_button_function(e));

html, body { width: 100%; height: 100%; margin: 0px; border: 0; overflow: hidden; display: block; }

<html> <canvas id="c"></canvas> <img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" /> <img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" /> </html>

Answer 1

据我所知，您在底部和左侧设置锚点是正确的，它“移出屏幕”的唯一原因是 window 小于左边的值，我对你的代码做了一些修改。

如果您正在绘制图像，您应该使用 onload，否则您可能会在图像尚未真正加载时执行 drawImage，这可能会使它看起来像是在屏幕外

window.addEventListener('resize', resizeCanvas, false);
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var btn = {left: 10, bottom: 60, width: 85, height: 50};
var btnImg = document.getElementById("the_button");
btnImg.onload = drawButton;
resizeCanvas()

function drawButton() {
  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;
  ctx.drawImage(btnImg, btn.x, btn.y, btn.width, btn.height);
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawButton();
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

the_button_function = (event) => {
  const { x, y } = event;
  if ((x >= btn.x && x < (btn.x + btn.width)) &&
    (y >= btn.y && y < (btn.y + btn.height))) {
    alert("<Button>")
  }
}
canvas.addEventListener('click', (e) => the_button_function(e));

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  overflow: hidden;
  display: block;
}

<html>
<canvas id="c"></canvas>

<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />

</html>

您的代码仅适用于左侧和底部...
如果你想锚定在右边，顶部你需要改变你的逻辑：

  btn.x = btn.left;
  btn.y = canvas.height - btn.bottom;

但是左下角效果很好，我看不出有什么问题。

Canvas 对象定位问题 - JS

Canvas object positioning issue - JS

javascript

canvas

resize