HTML5 Canvas视频背景+图片透明遮掩层

video mask。本例演示如何在Canvas上制作视频遮罩。

canvas, video

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 15240
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

编译

CSS

HTML

video mask。本例演示如何在Canvas上制作视频遮罩。

canvas, video

编辑器支持Emmet

快捷键

video mask。 本例演示如何在Canvas上制作视频遮罩。

canvas, video

HTML5 Canvas 蜂巢背景图案+六边形雾化旋转特效

HTML5 Canvas 响应式棱镜特效图片轮播 - 透明立方体框架

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

video mask。本例演示如何在Canvas上制作视频遮罩。