Question

我在画布上绘制了余额值。我想在画布上的这个确切位置上放置一个div元素。

调整窗口大小时，我注意到画布平衡位置保持不变。

有人可以建议如何将元素在画布内的位置转换为网页内的位置吗？

Answer 1

由于我没有您的代码，因此我正在发明。在以下示例中，我正在绘制一个响应式画布。在画布上，我正在绘制一个带有白色笔触的矩形。矩形的右下角距离画布的右下角100/100个单位。

HTML文本使用CSS定位在矩形上方。我希望这能回答您的问题。

const output = document.getElementById("output");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = (canvas.width = window.innerWidth);
let ch = (canvas.height = window.innerHeight);
ctx.strokeStyle="white";
  ctx.beginPath();
  ctx.strokeRect((cw-100), (ch-100), -200,-50);



function init() {
cw = (canvas.width = window.innerWidth);
ch = (canvas.height = window.innerHeight);
  ctx.strokeStyle="white";
  ctx.beginPath();
  ctx.strokeRect((cw-100), (ch-100), -200,-50);
}

setTimeout(function() {
  init();
  addEventListener("resize", init, false);
}, 15);

* {
  margin: 0;
  padding: 0;
}
canvas {
  background: black;
}
div {
  position: relative;
}
p {
  position: absolute;
  right: 100px;
  bottom: 100px;
  display: block;
  width: 200px;
  height: 50px;
  color: white;
  line-height: 50px;
  text-align: center;
}

<div>
  <canvas></canvas>
  <p>TEXT</p>
</div>

将html元素放在Canvas中的确切位置上

1 个答案: