html5 canvas 遮罩,HTML5 Canvas视频背景+图片透明遮掩层

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// canvas settings

var mViewWidth = 0,

mViewHeight = 0,

mCanvas = document.getElementById("mycanvas"),

mCtx;

var mImage = document.getElementById('image'),

mVideo = document.createElement('video');

mVideo.autoplay = true;

mVideo.loop = true;

mVideo.src = '/uploads/141201/among_the_stars.mp4';

mVideo.load();

mVideo.addEventListener('loadeddata', function() {

initCanvas();

requestAnimationFrame(loop);

});

function initCanvas() {

mViewWidth = mCanvas.width = mCanvas.clientWidth;

mViewHeight = mCanvas.height = mCanvas.clientHeight;

mCtx = mCanvas.getContext('2d');

}

/

// LOOP

/

function draw() {

// prevent flicker

if (mVideo.currentTime >= 0.01) {

mCtx.clearRect(0, 0, mViewWidth, mViewHeight);

mCtx.globalCompositeOperation = 'source-over';

mCtx.drawImage(mImage, 40, 0, mViewWidth, mViewHeight);

mCtx.globalCompositeOperation = 'hard-light';

mCtx.drawImage(mVideo, 0, 0);

}

}

function loop() {

draw();

requestAnimationFrame(loop);

}