Нарисуйте видеофильм, используя перспективу на холсте ⇐ Javascript

[Anonymous]

Итак, я знаю, как рисовать видеофильм на холсте с этим кодом, который я получил от Codepen: < /p>
let v = document.querySelector("video");
let c = document.querySelector("canvas");
let ctx = c.getContext("2d");
let i;
function draw() {
let times = v.videoWidth/270;
let vHeight = v.videoHeight/times;
c.width = 270;
c.height = vHeight;
i = window.requestAnimationFrame(draw)
ctx.drawImage(v, 0, 0, 270, vHeight)
}

v.addEventListener("loadeddata", function() {
draw()
}, false);
v.addEventListener("play", function() {
draw()
}, false);
v.addEventListener("pause", function() {
window.cancelAnimationFrame(i);
i = undefined;
}, false);
v.addEventListener("ended", function() {
window.cancelAnimationFrame(i);
i = undefined;
}, false);
< /code>
Я также знаю, как нарисовать изображение с перспективой на холсте с перспективой. Теперь мой вопрос в том, как объединить эти два, чтобы получить рисованную видеофильм с перспективой.
Я попытался объединить эти два, такие как: < /p>
function zeichne() {
let times = v.videoWidth/270;
let vHeight = v.videoHeight/times;
c.width = 270;
c.height = vHeight;
i = window.requestAnimationFrame(zeichne)
var p = new Perspective(ctx, v);
//This is the original perspective draw
/* p.draw([
[0, 0],
[image.width - 50, 50],
[image.width - 70, image.height - 30],
[10, image.height]
]); */
//This is mine
p.draw([
[0, 0],
[times - 50, 50],
[times - 70, vHeight - 30],
[10, vHeight]
]);
//ctx.drawImage(v, 40, 0, 270, vHeight)
}
}
< /code>
Проблема в том, что я просто получаю ошибку, говоря: «this.p не определен» в строке 84 перспективы. Но я проверил JS и не вижу никаких ошибок в моем коде или в перспективе.js.
>

Подробнее здесь: https://stackoverflow.com/questions/794 ... n-a-canvas