Question

我正在寻找按照这里所做的事情做的事情：

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

Answer 1

您可以将视频用作位图的来源。然后，您可以屏蔽位图。只要阶段更新，Bitmap就会对源执行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);

Answer 2

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

有关详细信息，请参阅this。我认为这是您想要的

如何在createjs中屏蔽视频

2 个答案: