我尝试开发具有上下文菜单的HTML 5 Canvas。单击“画布”中的每个图像时，它将显示每个图像的上下文菜单。那里只有一块画布
<canvas id="canvas" width=300 height=300></canvas>
当我绘制时它将显示所有图像。我尝试一些jquery库上下文菜单，它仅在有更多画布的情况下才支持（因为它使用class或id元素来检测HTML元素）。
现在我只想使用1个画布，已检测到画布中每个图像的单击，但是我不知道如何创建上下文菜单。您能建议我使用jquery库还是以我为例？
谢谢。
一种想法是使用无序列表创建自己的自定义上下文菜单。
通过侦听contextmenu画布上的事件来覆盖默认的上下文菜单。
canvas.addEventListener('contextmenu', handleContextMenu, false);
在画布上绘制的特定图像内单击上下文鼠标按钮时，您可以使用针对所单击图像的个性化列表项来重建UL。
设置UL的position:absolute，left，top以在画布上的鼠标位置定位您的上下文菜单。
您可以在不需要UL时将其隐藏。
侦听UL列表项上的单击事件，以响应用户上下文菜单的选择。
示例代码和演示：
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var $menu=$('#contextMenu');
var rects=[];
rects.push({x:50,y:50,width:50,height:50,color:"red",contextMenu:['One red','Two red']});
rects.push({x:150,y:100,width:75,height:75,color:"blue",contextMenu:['One blue','Two blue']});
ctx.clearRect(0,0,cw,ch);
for(var i=0;i<rects.length;i++){
var rect=rects[i];
ctx.beginPath();
ctx.fillStyle=rect.color;
ctx.rect(rect.x,rect.y,rect.width,rect.height);
ctx.fill();
}
$('#contextMenu').on('click','li',function(e){
// hide the context menu
showContextMenu();
alert('Context selection: '+$(this).text());
});
// hide the context menu
showContextMenu();
canvas.addEventListener('mousedown', handleMouseDown, false);
canvas.addEventListener('contextmenu', handleContextMenu, false);
function handleMouseDown(e){
// hide the context menu
showContextMenu();
}
function handleContextMenu(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get mouse position relative to the canvas
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
// hide the context menu
showContextMenu();
// check each rect for hits
for(var i=0;i<rects.length;i++){
var rect=rects[i];
var rectRight=rect.x+rect.width;
var rectBottom=rect.y+rect.height;
// check each rect for hits
if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom ){
showContextMenu(rect,x,y);
}
}
return(false);
}
function showContextMenu(r,x,y){
if(!r){$menu.hide(); return;}
$menu.show();
var m=r.contextMenu;
$menu.empty();
$menu.css({left:x,top:y});
for(var i=0;i<m.length;i++){
$('<li>', { text:m[i], 'data-fn':i, }).appendTo($menu[0]);
}
}body{ background-color: ivory; padding:0; }
#canvas{border:1px solid red;}
#canvasContainer{position:relative;}
#canvas,#contextMenu{position:absolute;}
#contextMenu{
border:1px solid green;
background:white;
list-style:none;
padding:3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Right click on rect for context menu.</h4>
<div id=canvasContainer>
<canvas id="canvas" width=300 height=300></canvas>
<ul id=contextMenu><li>Test</li></ul>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句