canvas - 在 html 视频上放置舞台/图层

Question

我有一个 HTML5 视频和一个动力学舞台/图层（画布）。我想将舞台/图层直接放在视频上，因为我打算创建形状。舞台始终默认为浏览器的 0,0 位置。如何设置舞台/图层的位置直接位于视频上方某个 x、y 位置。我尝试使用 stage.setAbsolutePosition(56,75) 但它不起作用。

先谢谢了。

Answer 1

使用一些 CSS 定位您的 KinectJS Stage 容器和 Video 容器：

虚构的 HTML 和 CSS 的非常粗略的示例：

<div class="viewport">
   <div id="videoContainer">...</div>
   <div id="kineticContainer">...</div>
 </div>

.viewport {
  position: relative;
}

#kineticContainer {
   ...
   background-color: transparent;
   position: absolute;
   x: 56px;
   y: 75px;
   z-index: 2;//or whatever this needs to be
   ...
}