HTML5 视频上的容器（画布）答案

【问题标题】：Container (canvas) over HTML5 VideoHTML5 视频上的容器（画布）
【发布时间】：2012-10-15 21:28:49
【问题描述】：

使用 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
        });

【问题讨论】：

标签： html video canvas containers kineticjs

【解决方案1】：

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

Test demo。使用 WebKit 控制台查看视频元素和画布在同一个位置。

【讨论】：