html - HTML5 视频上的容器（画布）

Question

使用 HTML5 Canvas 时，我可以使用以下内容在我的 HTML5 视频上设置 Canvas。

<video id ="video1" width="320" height="300"  controls="controls" style="position:absolute; top: 10; left: 10;" >

<canvas id="canvas3" width="320" height="240" style="position:absolute; top: 10; left: 10;" >
</canvas>

我怎样才能使用 KineticJS 做同样的事情？我没有看到使用 KinetcJS 设置容器（画布）位置的选项。

我有以下内容：

var myStage = new Kinetic.Stage(canvas3, 100);
        var stage = new Kinetic.Stage({
          container: "container",
          width: 320,
          height: 240
        });

Answer 1

从 KineticJS 文档中，Kinetic.Stage借用了setAbsolutePositionfrom Kinetic.Node。您可以使用它来设置节点的 x 和 y 位置。

测试演示。使用 WebKit 控制台查看视频元素和画布在同一个位置。