如何在createjs中屏蔽视频

how to mask a video in createjs

本文关键字：屏蔽 视频 createjs      更新时间：2023-09-26

我正在考虑做一些类似于这里所做的事情:

http://viget.com/extend/masking-video-tags-using-html5-canvas

其中globalCompositeOperation用于设置遮罩区域。

function drawMaskedVideo() {
    ctx.save();
    // Draw the video feed
    ctx.drawImage(video, 0, 0);
    // Set the composite operation, which is responsible for masking
    // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
    ctx.globalCompositeOperation = 'destination-in';
    // Apply the mask
    ctx.drawImage(mask, 0, 0);
    ctx.restore();
}
requestAnimationFrame(function loop() {
    requestAnimationFrame(loop.bind(this));
    drawMaskedVideo();
});

然而，我不确定这将如何与createjs集成，有没有人看到它在createjs中完成，我没有找到任何例子，虽然我确实注意到位图源可以是视频。http://www.createjs.com/Docs/EaselJS/classes/Bitmap.html

您可以使用视频作为位图的源。然后你可以遮罩位图。每当舞台更新时，位图就会对源执行drawImage()操作。请注意，蒙版将自己与位图的方向，所以你不需要手动移动蒙版，除非你想改变它相对于视频。

var bmp = new createjs.Bitmap(videoHTMLTag);
bmp.mask = new createjs.Shape(new createjs.Graphics().beginFill("#000").drawRect(0,0,100,100));

确保不断更新舞台，否则视频从第一次渲染开始就不会改变。

createjs.Ticker.on("tick", stage);

你可以把容器移动到任何你想要的位置将包含的图像偏移到所需的位置。这是可以做到的通过将您想要蒙版的图像添加到容器。

更多信息请看这个。我想这就是你想要的

相关文章：