在P5js中,我想在视频上叠加一个形状,但它们不共享同一个dom.

Code test here:视频应该通过切割形状的三角形轮廓可见.

代码:

let video;

function preload() {
  video = createVideo("video.mp4");
}


function setup() {
  createCanvas(400, 300);
  background("gray");

  video.size(400,400);
  video.loop();
  
  var w = width * 0.7;
  var h = height * 0.7;

  translate((width/2) - (w/2), (height/2) - (h/2));

  fill("lightgray");
  noStroke();
  beginShape();
    vertex(0, 0);
    vertex(w, 0);
    vertex(w, h);
    vertex(0, h);
    beginContour();
      vertex(w * 0.2, h * 0.4);
      vertex(w * 0.5, h * 0.8);
      vertex(w * 0.8, h * 0.4);
    endContour();
  endShape();

  noLoop();
}

我看到here个隐藏视频,使用image(即image(video, 10, 10))可以绘制单个帧.唉,我使用noLoop(),在我的情况下,draw()中不会自动刷新视频.

推荐答案

"The video should be visible through the triangular contour that cuts the shape."

下面是我对你的代码进行快速修改后得到的结果
也许它在某种程度上对你有用(eg:给出了如何进行的新 idea ).

代码的逻辑是简单地创建两层

其他 idea 包括可能使用Screen或Multiply等混合模式:

示例测试代码(包括两层,也删除了background("gray");层)

let video; let canv;

function preload() 
{ video = createVideo("video.mp4"); }

function setup() 
{
  translate(0, 0);
  
  video.size(400,300);
  video.style("z-index: 1"); //# is default in P5.JS
  video.position(0, (width * 0.7) );
  video.loop();
  
  canv = createCanvas(400, 400);
  canv.style("z-index: 2");
  canv.position(0, 0); //# important to have a setting
  
  //# Not needed ....
  //background("gray");
  
  var w = width * 1;
  var h = height * 1;
   
  translate((width/2) - (w/2), (height/2) - (h/2));

  fill("lightgray");
  noStroke();
  
  beginShape();
    vertex(0, 0);
    vertex(w, 0);
    vertex(w, h);
    vertex(0, h);
  
 beginContour();
      vertex(w * 0.2, h * 0.4);
      vertex(w * 0.5, h * 0.8);
      vertex(w * 0.8, h * 0.4);
    endContour();
  endShape();

  noLoop();
}

Javascript相关问答推荐

在我的html表单中的用户输入没有被传送到我的google表单中

如何在Angular17 APP中全局设置AXIOS

VUE 3捕获错误并呈现另一个组件

覆盖加载器页面避免对页面上的元素进行操作

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

在画布中调整边上反弹框的大小失败

有效路径同时显示有效路径组件和不存在的路径组件

在SuperBase JS客户端中寻址JSON数据

如何使用useparams从react路由中提取id

Rails 7:在不使用导入映射的情况下导入Java脚本

错误400:当我试图在React中使用put方法时,该字段是必需的

用内嵌的含selenium的Java脚本抓取网站

如何在Java脚本中添加一个可以在另一个面板中垂直调整大小的面板?

如何从图表中映射一组图表-js使用REACT

在openstreemap/leaflet中,当鼠标在 map 上移动时,如何在小工具提示中实时显示坐标

如何导入我在Web Worker创建的函数?

制表机表宽度在第一次加载时缩小,拖动后正在调整

我在从侧面到内部的react 中面临着推翻观点的问题

JS日期构造函数与future 日期不一致

为什么它是Object.hasOwn(x,y)!==Reflect.ownKeys(X).如果x是CSSStyleClaimation对象,而y是像';z-index';这样的连字符属性,则包含(Y)?