Question

我试图在非透明HTML上绘制叠加画布，但画布＆＃34;窃取＆＃34;上下文菜单。

是否有可能忽略画布的上下文菜单？

制作一个显示问题的jsfiddle：http://jsfiddle.net/75x8uwxf/1/

HTML：

<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />

CSS：

#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

JS：

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();

如果右键单击绿色虚线区域（方案A），您将看到使用画布菜单。如果在绿色虚线区域外单击（方案B），则会获得常规上下文。

我希望它表现得像scenaior B，即使你在绿色虚线区域内右击也是如此。

这有可能吗？

Answer 1

假设您不需要与canvas进行任何用户互动，可以在pointer-events: none;元素上使用canvas：

＆＃13;

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();

＆＃13;

#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

canvas {
    pointer-events: none;
}

＆＃13;

<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />

＆＃13;

叠加画布“窃取”上下文菜单

1 个答案: