在画布上显示可点击的div

-2

我动态地创建了一个div，该div应显示在用户点击位置的画布顶部。该div正在创建，但没有显示。 Id也喜欢它可以像按钮一样点击。有什么建议做什么？在画布上显示可点击的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); 

}

来源

2016-08-17 Sam kh

div是否有高度和宽度？或背景颜色？这些东西有助于看到它。 – Miles

@miles是的，它确实大声笑。我不好，我想，我不小心删除了，但没有注意到，当我发布这个对不起。 –

它看起来像你设置左和顶两次。将第二个更改为高度和宽度。 – Miles

这里是你如何能做到这一点快速演示：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-wrapper和的div添加到包装。 divs将成为画布的兄弟姐妹，但不是儿童。正如这里讨论的：Is it possible to force the html canvas tag to display children?

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

来源

2016-08-17 17:21:14 kmandov

非常感谢，我可以根据我的想法取得一些进展。当然，我只是为了测试目的而编写硬编码。 –

在画布上显示可点击的div

回答

相关问题