如何在CreateJS中屏蔽视频

Question

我正在看着在这里完成的事情做某事：

在其中用于设置蒙面区域的范围。

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

Answer 1

您可以使用视频作为位图的源。然后，您可以掩盖位图。只要更新阶段，位图就会使用源的绘图（）。请注意，掩码将使用位图定位，因此您不需要手动移动掩码，除非您希望将其更改为视频。

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

.

Answer 2

可以将容器移动到您想要的任何位置 OFFFSET包含在所需位置的图像。可以完成 通过添加要屏蔽到容器的图像。

看