如何在p5.js上制作视频/gif透明

Question

我正在尝试在画布上播放视频，并且也使其变得透明。

我尝试了tint((函数，但它似乎仅在图像上工作。

let vid;
let button;
function setup() {
    createCanvas(1000, 1000);
    vid = createVideo("final1.mp4"); 
    vid.hide(); 
    button = createButton('play');
    button.position(100,200); 
    button.mousePressed(toggleVid);
}
function draw() {
    background(220);
}
function toggleVid(){
    tint(255, 126);
    vid.show(); 
    vid.play(); 
    vid.position(100,300); 
}

我希望视频或GIF透明，不工作。

Answer 1

为了使视频透明，您可以在画布上显示并使用色调。

这是一个示例，它结合了这三个p5.js示例的代码，即dom-video，dom-video-canvas和tint。该代码在画布上绘制一个红色圆圈，然后设置色调并绘制视频偏移为10像素，因此您可以看到透明度。

let playing = false;
let fingers;
let button;
function setup() {
  createCanvas(300,300)
  fingers = createVideo(['fingers.mov']);
  fingers.hide();
  button = createButton('play');
  button.mousePressed(toggleVid); // attach button listener
}
function draw() {
  background(150);
  fill(255,0,0,200);
  ellipse(50,50,100,100);
  tint(255, 127); // make the video partially transparent without changing the color
  image(fingers, 10, 10); // draw the video frame to canvas
}
// plays or pauses the video depending on current state
function toggleVid() {
  if (playing) {
    fingers.pause();
    button.html('play');
  } else {
    fingers.loop();
    button.html('pause');
  }
  playing = !playing;
}

运行草图