HTML5畫布和視頻

Question

我如何可以使視頻中的畫布伏貼在該地區

See picture

Answer 1

繪圖過程

通過去除紅色區域使得alpha通道出來的而不是背景圖像離線準備，然後用它像這樣：

• 畫出視頻與變換帆布施加緊密匹配形狀加上一點重疊
• 在視頻頂部繪製背景（或第一次繪製後的部分）。這會掩蓋不完美的視頻邊緣。

轉型

離線過程：

• 地塊（現在）阿爾法環境，讓您有座標，可以是三角形或四邊形的點。注：畫布僅支持仿射變換（2D /平行四邊形），所以triangle has to be used。對於CSS，您可以使用3D transforms with basis in a quadrilateral shape。
• 規格化的值

在動作：

• 量表畫布和所希望的大小
• 應用變換，繪製視頻的歸一化值，繪製背景疊加在視頻
的頂

而且由於大多數視頻最多是每秒30幀，因此您還可以將繪圖循環調整爲一半以便爲其他人留下更多資源（使用requestAnimationFrame()與toggle flag）。

替代做法：

準備一個視頻的一切設置爲你想要的。它應該壓縮得很好，因爲周圍的區域不會改變（使用長的關鍵幀間隔），在這種情況下背景不包含太多的細節，因爲低景深也是有幫助的。

Answer 2

......它不能與本地HTML5畫布轉換完成。

您正在嘗試將顯示Canvas內容（==您的視頻）轉換爲非平行四邊形 - 這對於原生Canvas轉換是不可能的。畫布只能重新塑造成平行四邊形。

但是...

可以扭曲畫布接近你想要的顯示。

可以與天然帆布進行金平行四邊形此圖像中變換

實施例的代碼演示：

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var angle=-Math.PI*.06; 
 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/billboard1.jpg"; 
 
function start(){ 
 
    cw=canvas.width=img.width; 
 
    ch=canvas.height=img.height; 
 
    ctx.drawImage(img,0,0); 
 
    ctx.transform(1,Math.tan(angle),0,1,0,0); 
 
    ctx.strokeStyle='gold'; 
 
    ctx.lineWidth=4; 
 
    ctx.strokeRect(333,135,275,150); 
 
}

<canvas id="canvas" width=300 height=300></canvas>