ビデオの一部をキャンバスで再生する

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

これを達成するために合成を使用できます。

アルファチャンネルを使用して非アルファデータをさまざまな方法で結合します。たとえば、「source-in」はソースイメージ/ビデオにピクセルがある場合はペイントし、「destination-over」では既存のピクセルをそのまま残しますアルファがない場合は新しいアルファベットだけをペイントします（これらもまたPorter-Duff or alpha compositionと呼ばれます）。ブレンドは同じ傘の下にありますが、合成の目的とは異なります。

多くのモードがありますが、上記の2つのモードを組み合わせて、両方のマスクとして機能するアルファ領域を定義するだけで、必要な部分を得ることができます。

（A =ソース、B =宛先）

：私は、各モードのオペレーターの仕事は、より良い彼らは（Wikipediaから）何をするかを理解する方法を示すための概要が含まれますこの場合に必要な手順は次のようになります。構図モード「source-over」と

• 初期我々はループ内でこれを使用するよう
• 枚のクリアキャンバスは、（左側にそれを配置する）
• 私たちは「source-in」を使用して上にマウスの位置に
• ドロービデオソース2を対角線の半分の相対を描く
• で動作するようにアルファチャンネルを持っていることを確認します（上述したようにこれは、2つの異なるビデオ（hereから借用リンク）とループアップロードされたセットをロードする「destination-over」

実施例

を使用して上部に映像ソース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>