Html5 холст и видео

Question

Как я могу сделать холст для видео, чтобы совершенно вписаться в районе

See picture

Answer 1

Процесс рисования

Подготовьте фоновое изображение в автономном режиме, удалив красную область делает альфа-канал из него вместо этого, а затем использовать его как это:

• рисовать видео на холсте с преобразованием прикладного соответствия тесно форма плюс небольшое перекрытие
• Нарисуйте фон (или его части после первого розыгрыша) поверх видео. Это замаскирует края видео, которые не подходят идеально.

Трансформация

Offline процесс:

• Plot точки (теперь) альфа области, поэтому у вас есть координаты, либо треугольник или четырехугольник. Примечание: холст поддерживает только аффинные преобразования (2D/параллелограммы), поэтому triangle has to be used. Для CSS вы можете использовать 3D transforms with basis in a quadrilateral shape.
• нормировать значения

В действии:

• Масштаб холста и нормированных значений до нужного размера
• Применить преобразование, рисовать видео, рисовать фон, как наложение поверх видео

И поскольку большинство видеороликов не более 30 кадров в секунду, вы также можете дросселировать цикл рисования до половины, чтобы оставить больше ресурсов для других вещи (используйте requestAnimationFrame() с toggle flag).

Альтернативный подход:

Подготовка видео со всей настройкой, как вы хотите. Он должен хорошо сжиматься, так как окружающие области не меняются (используйте длинный интервал ключевого кадра), и в этом случае фон не содержит много деталей из-за низкой глубины резкости, что также помогает.

Answer 2

... Это не может быть сделано с носителями преобразований Html5 Canvas.

Вы пытаетесь преобразовать содержимое холста в формате Canvas (== ваше видео) в непараллелограмму, что невозможно с помощью собственных преобразований 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>