Javascript 如何在覆盖在视频上方的HTML5画布上自由绘制？

我有一个视频元素和画布元素。样式如下所示：

canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height:100%;
  width:100%;
  background-color: rgba(0,0,255,0.5);
  z-index:10;
}
video {
  position: absolute;
  top: 0;
  left: 0;
}

HTML如下所示

<video id="local-video" class="ui large image hidden" autoplay></video>
      <canvas id="c1" class="ui large"></canvas>

我试图在画布上画视频元素。当我将画布的位置设置为“固定”时，我可以使用下面的代码在画布中绘制，但画布不会覆盖在视频中。但当我将“位置”设置为“绝对”时，画布会覆盖在视频中，但我无法在视频中绘制。我检查了控制台中的context.moveTo（）和context.lineTo（）点，它们显示得很完美，但没有在画布中绘制。请帮忙。 //帆布 var canvas=document.getElementById（'c1'）； var context=canvas.getContext（'2d'）； var localVideo=document.getElementById（'local-video'）） localVideo.addEventListener（“loadedmetadata”，函数（e）{ var width=此.videoWidth， 高度=此高度； canvas.height=高度； 画布宽度=宽度； }，假）

$（'#c1'）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，false）；
重画（）；
});
$（'#c1'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#c1'）.mouseup（函数（e）{
油漆=假；
});
$（'#c1'）.mouseleave（函数（e）{
油漆=假；
});
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
功能添加单击（x、y、拖动）
{
点击x.按下（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
函数重画（）{
context.clearRect（0,0，context.canvas.width，context.canvas.height）；//清除画布
context.strokeStyle=“rgba（0,0255,0）”；
context.lineJoin=“round”；
context.lineWidth=5；
对于（变量i=0；i

我不知道这是不是你要找的东西：我用的是视频和画布。我可以点击开始和停止视频，我可以在画布上自由画画

const canvas=document.getElementById（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=canvas.width=400，
cx=cw/2；
设ch=canvas.height=200，
cy=ch/2；
ctx.strokeStyle=“#fff”；
让绘图=假；
//用于检测鼠标位置的函数
功能oMousePos（元件，evt）{
var ClientRect=element.getBoundingClientRect（）；
返回{//objeto
x:Math.round（evt.clientX-ClientRect.left），
y:Math.round（evt.clientY-ClientRect.top）
}
}  
parentDiv.addEventListener（'mousedown'，函数（evt）{
drawing=true；//现在可以绘图了
设m=oMousePos（parentDiv，evt）；
ctx.beginPath（）；
ctx.moveTo（m.x，m.y）；
}，假）；
parentDiv.addEventListener（'mouseup'，函数（evt）{
drawing=false；//您不能再绘制了
}，假）；
parentDiv.addEventListener（'mouseleave'，函数（evt）{
drawing=false；//您不能再绘制了
}，假）；
parentDiv.addEventListener（“mousemove”，函数（evt）{
if（图纸）{
设m=oMousePos（parentDiv，evt）；
ctx.lineTo（m.x，m.y）；
ctx.stroke（）；
}
}，假）
正文{
背景色：#222；
溢出：隐藏；
}
视频，画布{
宽度：400px；
高度：200px；
显示：块；
位置：绝对位置；
}
画布{指针事件：无；}

您的浏览器不支持HTML5视频。

视频由
.
我用简单的js重写了脚本，留下了与您类似的HTML和CSS，现在它可以工作了

var oldX, oldY;
var draw=false;
canvas.onmousedown=function(e) {
  oldX = (e.pageX - this.offsetLeft)/4;
  oldY = (e.pageY - this.offsetTop)/4;
  draw=true;
}
canvas.onmousemove=function(e) {
  var mouseX = (e.pageX - this.offsetLeft)/4; //was out of scale, this gets it almost 
  var mouseY = (e.pageY - this.offsetTop)/4; // where I want it to be, to fix
  if(draw) {
  context.beginPath();
  context.moveTo(oldX, oldY);
  context.lineTo(mouseX, mouseY);
//   console.log(mouseX, mouseY);
  context.stroke();
  context.closePath();
  oldX=mouseX;
  oldY=mouseY;
  }

}
canvas.onmouseup=function(e) {
  draw=false;
}

能否为视频添加指针事件：无？如果不能，您可以尝试在画布的父级上使用这些事件，因为画布与父级一样宽。@enxaneta两种方法似乎都不起作用。还有什么我可能做错的吗？显然你可以在jQuery中重写事件处理程序
var oldX, oldY;
var draw=false;
canvas.onmousedown=function(e) {
  oldX = (e.pageX - this.offsetLeft)/4;
  oldY = (e.pageY - this.offsetTop)/4;
  draw=true;
}
canvas.onmousemove=function(e) {
  var mouseX = (e.pageX - this.offsetLeft)/4; //was out of scale, this gets it almost 
  var mouseY = (e.pageY - this.offsetTop)/4; // where I want it to be, to fix
  if(draw) {
  context.beginPath();
  context.moveTo(oldX, oldY);
  context.lineTo(mouseX, mouseY);
//   console.log(mouseX, mouseY);
  context.stroke();
  context.closePath();
  oldX=mouseX;
  oldY=mouseY;
  }

}
canvas.onmouseup=function(e) {
  draw=false;
}