Как замаскировать видео в createjs

Question

Я смотрел на то, что делал что-то по линию того, что сделано здесь:

http://viget.com/extence/masking-video--Теги с помощью-HTML5-Canvas

там, где глобальная комбитопрессия используется для установки области в маске.

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

.

Однако я не уверен, насколько хорошо это будет интегрировать с commarys, у кого-нибудь видели это в Createjs, я не нашел никаких примеров, хотя я заметил, что битовой источник может быть видео. http://www.createjs.com/docs/easeljs/classes/bitmap.html

Answer 1

Вы можете использовать видео в качестве источника для растрового изображения.Затем вы можете замаскировать растровое изображение.Bitmap просто делает HOWNIMAGE () с источником всякий раз, когда этап обновляется.Обратите внимание, что маска будет ориентироваться с растровым изображением, поэтому вам не нужно вручную перемещать маску, если вы не хотите изменить его относительно видео.

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

Вы можете переместить контейнер на все, что вы хотите, и Offfet Изображение, содержащееся в нужное, которое вы хотите. Добавляя изображение, которое вы хотите замаскировать в контейнер.

Смотрите Это один для получения дополнительной информации.Это то, что вы хотели