在畫布上播放視頻的一部分

Question

我想只在視頻中播放一半的視頻，但在對角線上截斷。 目前，我可以用這個小的JavaScript在畫布easyli發揮我的完整視頻：

var video = document.getElementById('video'); 
var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var drawFrame = function drawFrame() { 
    context.drawImage(video, 0, 0, canvas.width, canvas.height); 
    requestAnimationFrame(drawFrame); 
}; 

requestAnimationFrame(drawFrame); 

最後，我希望能夠打2個視頻，在同一時間（我只需要調用drawImage方法對每個視頻），但每個將被削減對角，來呈現這樣的事情：

我再要移動取決於鼠標位置的分隔符。

Answer 1

您可以使用組合來實現此目的。

組合物使用alpha通道以各種方式組合非alpha數據，例如「source-in」將繪製存在像素的源圖像/視頻，而「destination-over」將保留現有像素是非alpha的，只在有alpha的地方繪製新的（這些也被稱爲Porter-Duff or alpha composition。混合屬於同一個傘，但與合成目的不同）。

有許多模式，但上面提到的將允許我們將它們組合起來，通過定義一個用作兩者的掩碼的alpha區域來獲得我們想要的部分。我將包括概述，說明如何爲每種模式的運營商合作，以更好地瞭解他們在做什麼（從Wikipedia）：

（A =源，B =目的地）

的在這種情況下所需的步驟是：

• 初始化用組合物模式「source-over」，因爲我們使用這種在循環
• 個清除畫布，以確保我們有一個alpha通道與
• 工作使用「source-in」頂部對角線相對的一半繪製到鼠標位置
• 抽獎視頻源2（將其放置在左側）
• 使用「destination-over」

工作實施例

這將加載兩種不同的視頻（鏈接從here借用）中並加載時建立環路如上所述的頂部繪製視頻源1（只是給視頻幾秒鐘加載）：

var ctx = c.getContext("2d"), pos = c.width * 0.5, count = 2; 
 
ctx.fillText("Please wait while videos are loading...", 20, 20); 
 
video1.oncanplay = video2.oncanplay = function() {if (!--count) renderFrame()}; 
 

 
function renderFrame() { 
 
    ctx.globalCompositeOperation = "source-over"; 
 
    ctx.clearRect(0, 0, c.width, c.height);  // makes sure we have an alpha channel 
 

 
    ctx.beginPath();       // draw diagonal half 
 
    ctx.moveTo(0, 0); 
 
    ctx.lineTo(pos - 50, 0); 
 
    ctx.lineTo(pos + 50, c.height); 
 
    ctx.lineTo(0, c.height); 
 
    ctx.fill(); 
 

 
    // video source 2 
 
    ctx.globalCompositeOperation = "source-in";  // comp in source 2 
 
    ctx.drawImage(video2, 0, 0, c.width, c.height); 
 
    
 
    // video source 1 
 
    ctx.globalCompositeOperation = "destination-atop"; // comp in source 1 
 
    ctx.drawImage(video1, 0, 0, c.width, c.height); 
 

 
    requestAnimationFrame(renderFrame) 
 
} 
 

 
c.onmousemove = function(e) { 
 
    pos = e.clientX - c.getBoundingClientRect().left; 
 
}

video {display:none}

<canvas id=c width=640 height=400></canvas> 
 
<video id=video1 muted autoplay loop src="http://media.w3.org/2010/05/sintel/trailer.mp4"></video> 
 
<video id=video2 muted autoplay loop src="http://media.w3.org/2010/05/video/movie_300.webm"></video>