单击内部画布圆时打开弹出窗口 [英] Open popup when click inside canvas circle
本文介绍了单击内部画布圆时打开弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在用户点击Circle内部时打开一个弹出窗口，您能建议我如何执行此操作吗？
这里是圆圈的代码：
<！DOCTYPE html>
< html>
< body>
< canvas id =myCanvaswidth =300height =150style =border：1px solid＃d3d3d3;>
您的浏览器并不支持HTML5 canvas标签。< / 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>
解决方案
点击画布标签区域时弹出框。但如果点击圈子，请使用此参考链接 http://www.w3schools.com/tags/tag_map .asp
您应该在canvas标签中添加下面的内容
onclick =document.getElementById（'light'）。style.display ='block'; document.getElementById（'fade'）。style.display ='block';
即
< canvas id = myCanvasonclick =document.getElementById（'light'）。style.display ='block'; document.getElementById（'fade'）。style.display ='block';width =300height =150 style =border：1px solid＃d3d3d3;>
您的浏览器不支持HTML5画布标签。< / canvas>
并创建两个标识为'light'和'fade'的div
< div id =lightclass =white_content>< a href =javascript：void（0）onclick =document.getElementById（'light'）。style.display ='none'; document。 getElementById（'fade'）。style.display ='none'>关闭< / a>< p>内容在这里< / p>< / div&
< div id =fadeclass =black_overlayonclick =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>
I want to open a popup when the user clicks inside the Circle, could you advise me how to do this please?
Here is the code for the 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>
解决方案I made a popup box when clicking the canvas tab area. But if clicking the circle then use this reference link http://www.w3schools.com/tags/tag_map.asp
You should add the belowline inside canvas tag
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';i.e.,
<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>and create two div with id as 'light' and 'fade'
<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>and write the css like below.
<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>
这篇关于单击内部画布圆时打开弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
