como a máscara de um vídeo em createjs

Question

Eu estava a tentar fazer algo ao longo das linhas de que é feito aqui:

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

Onde globalCompositeOperation é usado para definir a área mascarada.

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

No entanto eu não sei como é que esta irá se integrar com o createjs, alguém já vi isso feito em createjs, eu não encontrei nenhum exemplo, apesar de eu notar que um bitmap de origem pode ser um vídeo. http://www.createjs.com/Docs/EaselJS/classes/Bitmap.html

Answer 1

Você pode utilizar um Vídeo como uma fonte para um mapa de bits.Você pode, em seguida, uma máscara de Bitmap.O mapa de bits só faz uma drawImage() com a fonte, sempre que o estágio é atualizado.Note que a máscara vai se orientar com o mapa de bits, de modo que você não precisa mover manualmente a máscara, a menos que você deseja alterar-lo em relação ao vídeo.

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

Certifique-se de atualizar a fase constantemente, ou o vídeo não vai mudar a partir da primeira vez em que ele for renderizado.

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

Answer 2

Você pode mover o recipiente para qualquer que seja a posição que você quer e offfset a imagem contida para a posição que você deseja.O que pode ser feito adicionando a imagem que você deseja mascarar para o recipiente.

Ver este one para mais informações.Eu acho que isso é o que você queria