如何在画布元素上绘制视频？

【问题标题】：How to draw over video on a canvas element?如何在画布元素上绘制视频？
【发布时间】：2016-04-20 15:35:52
【问题描述】：

我正在尝试在我的应用程序中将画布用于两件事。首先是在画布上显示视频（我已经这样做了）。在那之后，我需要在这个视频上画正方形，而在那个部分我遇到了一些麻烦。当我尝试在另一个画布上使用一个画布时，视频总是停留在我正在创建的方块的顶部。如果我只使用一张画布，也会发生同样的事情。有人可以帮帮我吗？

【问题讨论】：

【解决方案1】：

使用画布，一切都与操作顺序有关，在您的示例中，您正在绘制视频并希望将正方形放在顶部，因此您需要在绘制视频之后绘制正方形。

简单示例：

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

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

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

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

【讨论】：