Question

我动态创建一个div，它应该显示在用户点击位置的画布顶部。 div正在创造，但没有显示。我也喜欢它像按钮一样可点击。有关如何做的任何建议吗？

function q(event) {
    event = event || window.event;

    var canvas = document.getElementById('canvas'),
    x = event.pageX - canvas.offsetLeft,
    y = event.pageY - canvas.offsetTop;

    var div = document.createElement('div');
    div.style.position = "absolute";
    div.style.left = x+'px';
    div.style.top = y+'px';        
    div.style.left = "50px";
    div.style.top = "50px";
    div.style.backgroundColor = "black";
    document.getElementsByTagName('canvas')[0].appendChild(div);

}

Answer 1

以下是有关如何执行此操作的快速演示：https://jsfiddle.net/od8zjeLp/2/

function q(event) {
  event = event || window.event;

  var canvas = document.getElementById('canvas-wrapper'),
    x = event.pageX - canvas.offsetLeft,
    y = event.pageY - canvas.offsetTop;

  var div = document.createElement('div');
  div.style.position = "absolute";
  div.style.background = 'red';
  div.style.width = '10px';
  div.style.height = '10px';
  div.style.left = x + 'px';
  div.style.top = y + 'px';

  canvas.appendChild(div);
}

var canvas = document.getElementById('canvas-wrapper');
canvas.addEventListener('click', q);

您可以在canvas元素周围创建一个包装器 - canvas-wrapper并将div添加到包装器中。 div将成为画布的兄弟姐妹，而不是孩子。如下所述：Is it possible to force the html canvas tag to display children?

对于生产用途，您可能希望优化代码：可能避免硬编码宽度/高度并重复使用canvas元素，而不是在每次点击时查询DOM。

在画布上显示可点击的div

1 个答案: