我有一个视频元素和画布元素 . 样式采用以下方式:
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()的点,它们完美地显示但没有在画布中绘制 . 请帮忙 . // canvas var canvas = document.getElementById('c1'); var context = canvas.getContext('2d'); var localVideo = document.getElementById('local-video')localVideo.addEventListener(“loadedmetadata”,function(e){var width = this.videoWidth,height = this.videoHeight; canvas.height = height; canvas.width = width ;},false);
$('#c1').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,false);
redraw();
});
$('#c1').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#c1').mouseup(function(e){
paint = false;
});
$('#c1').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "rgba(0,0,255,0)";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.stroke();
context.closePath();
}
}
2 回答
我用简单的js重写了脚本,让HTML和CSS像你的一样,现在它可以工作了
我不知道这是否是你要找的帽子:我正在使用视频和画布 . 我可以点击开始并停止视频,我可以在画布上自由绘制 .
我不是在使用jQuery,但我希望你能得到这个想法 .