如何在canvas元素上绘制视频？

Question

我试图在我的应用程序中使用画布来做两件事。首先是在画布上显示视频（我已经做过）。在那之后，我需要在这个视频上绘制正方形，并且在那部分我遇到了麻烦。当我尝试使用一个画布而不是另一个画布时，视频始终位于我正在创建的正方形的顶部。如果我只使用一个画布，则会发生同样的事情。有人能帮帮我吗？

Answer 1

使用画布时，所有关于操作的顺序，在您的示例中，您正在绘制视频并希望将平面放在顶部，因此您需要绘制正方形 AFTER 以绘制视频

简单示例：

https://jsfiddle.net/a3z5hb45/

ctx.fillStyle = "red"
ctx.fillRect(x, y, 100, 100);

ctx.fillStyle = "blue"
ctx.fillRect(x + 50, y + 50, 100, 100);

在这里你看到红色在蓝色下面。想象一下，红色是你的视频，所以如果你画了一些东西就会出现在上面。

如果你颠倒顺序，你会得到这个：

https://jsfiddle.net/a3z5hb45/1/