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;
}

Run the sketch

如何使p5.js上的视频/ gif透明？

1 个答案: