当前位置: 首页 > 知识库问答 >
问题:

如何在HTML5中的画布中自由地绘制,这是在视频上面覆盖的?

有权
2023-03-14

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

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>
  $('#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();
  }
}

共有1个答案

端木夕
2023-03-14

我不知道这是不是你在找的帽子:我在用一个视频和一张画布。我可以点击开始和停止视频,我可以在画布上自由绘制。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 400,
  cx = cw / 2;
let ch = canvas.height = 200,
  cy = ch / 2;
ctx.strokeStyle = "#fff";

let drawing = false;

// a function to detect the mouse position
function oMousePos(element, evt) {
      var ClientRect = element.getBoundingClientRect();
           return { //objeto
           x: Math.round(evt.clientX - ClientRect.left),
           y: Math.round(evt.clientY - ClientRect.top)
}
}  
parentDiv.addEventListener('mousedown', function(evt) {
      drawing = true; // you can draw now
       let m = oMousePos(parentDiv, evt);
       ctx.beginPath();
       ctx.moveTo(m.x,m.y);
}, false);
  
  parentDiv.addEventListener('mouseup', function(evt) {
      drawing = false; // you can't draw anymore

}, false);
  parentDiv.addEventListener('mouseleave', function(evt) {
      drawing = false; // you can't draw anymore

}, false);
  
  parentDiv.addEventListener("mousemove", function(evt) {
      if (drawing) {
        let m = oMousePos(parentDiv, evt);
        ctx.lineTo(m.x, m.y);
        ctx.stroke();
      }
}, false);
body {
  background-color: #222;
  overflow: hidden;
}
video,canvas {
width:400px;
height:200px;
display: block;
position:absolute;
}

canvas {pointer-events:none;}
<div id="parentDiv">
<video width="400" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
  
<canvas id="canvas"></canvas>
</div>
<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
 类似资料:
  • 我想在画布上画一段视频。为了实现这一点,我在Javascript中捕获onMouseDown和onMouseUp事件,以获得每个事件的x和y坐标(我需要在画布中设置视频的位置、宽度和高度)。 因此,每次我在画布上绘制视频时,我创建的上一个视频都应该停止,并且必须播放新的视频。两个问题: 1)视频不播放(功能只画第一帧),但他的音频可以 2) 如何停止以前绘制的视频? 演示:http://jsfid

  • 实际上,我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线?”中得到的东西。但是我需要在不使用from函数的情况下绘制图像,如下所示:

  • 问题内容: 似乎没有绘制椭圆形形状的本机功能。我也不是在寻找蛋形。 是否可以绘制具有2个贝塞尔曲线的椭圆形?有人遇到过吗? 我的目的是画一些眼睛,实际上我只是使用弧线。提前致谢。 解 因此,scale()更改所有下一个形状的缩放比例。Save()之前保存设置,还原用于还原设置以绘制新形状而无需缩放。 感谢Jani 问题答案: 更新: 缩放方法可能会影响笔触宽度的外观 正确的缩放方法可以保持笔画宽度

  • 问题内容: 我需要知道如何在画布上绘制多边形。不使用jQuery或类似的东西。 问题答案: 使用和创建一个路径:

  • 我想用javascript在响应画布上画一个圆圈。我得到了画布的宽度和高度,但由于div标签的宽度和高度%,我能够正确地画出圆圈。div标记的宽度和高度以%为单位,因为我想在单个页面上显示5个画布。是否有其他方法可以在一页上放置5块画布,并使用画布的高度和宽度在每个画布上画一个圆圈?还有一件事,我不想要绝对位置,因为根据浏览器的宽度,我想要改变画布的位置 图片:192.168。10.29/1.巴布

  • 问题内容: 是否有将SVG文件绘制到HTML5画布上的默认方法?GoogleChrome支持将SVG加载为图像(并简单地使用),但是开发者控制台会对此进行警告。 我知道将SVG转换为canvas命令的可能性,但是我希望这不是必需的。我不在乎较旧的浏览器(因此,如果FireFox 4和IE 9支持某些功能,那就足够了)。 问题答案: 编辑2019年12月16日 现在所有主要浏览器都支持Path2D