在画布圈内单击时打开弹出窗口答案

【问题标题】：Open popup when click inside canvas circle在画布圈内单击时打开弹出窗口
【发布时间】：2014-06-12 10:36:30
【问题描述】：

我想在用户在 Circle 内点击时打开一个弹出窗口，请问您能告诉我怎么做吗？

这是圈子的代码：

<!DOCTYPE html>
<html>
<body>


<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

</script> 

</body>
</html>

【问题讨论】：

标签： javascript css html canvas popup

【解决方案1】：

单击画布选项卡区域时，我制作了一个弹出框。但如果单击圆圈，则使用此参考链接http://www.w3schools.com/tags/tag_map.asp

你应该在画布标签内添加下面的行

onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';

即，

<canvas id="myCanvas" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';" width="300" height="150" style="border:1px solid #d3d3d3;" >
Your browser does not support the HTML5 canvas tag.</canvas>

并创建两个 id 为 'light' 和 'fade' 的 div

<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a><p>Content goes here</p></div>

<div id="fade" class="black_overlay" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></div>

并像下面这样编写 css。

<style type="text/css">
        .black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: fixed;
top: 10%;
left: 25%;
width: 50%;
height: 500px;
padding: 16px;
border: 13px solid #808080;
background-color: white;
z-index:1002;
overflow: auto;
}
    </style>

【讨论】：

画布标签中缺少一个“ - 你把它放在哪里？？
抱歉这里是更新的代码。请将我的代码中的 css、div 标签、canvas 标签复制到您的文件中。它会在您的页面中打开一个弹出窗口。
我在点击画布选项卡区域时做了一个弹出框。但如果单击圆圈，则使用此参考链接w3schools.com/tags/tag_map.asp
非常感谢^^
是的，它工作得很好，你太棒了:) 阅读这段代码我也学到了很多东西。我在你的帖子上打勾：P