javascript - 让 kineticjs 使用现有的 Canvas

Question

我正在尝试使用 kinetic.js使用现有的 Canvas 。问题是 kinetic.js API 要求您指定容器元素的 ID，然后 kinetic.js 创建一个 Kinetic.Stage(它创建并使用自己的 Canvas )。

例如:

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
  });

  var layer = new Kinetic.Layer();

  var rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4
  });

  // add the shape to the layer
  layer.add(rect);

  // add the layer to the stage
  stage.add(layer);
</script>

我希望能够将现有的 Canvas 元素与 kinetic.js 一起使用，而不是创建自己的 Canvas 元素。这可能吗？

A similar question之前有人问过，但似乎没有提供正确答案。

有什么想法吗？谢谢!

Answer 1

html Canvas 只是一堆像素。

您可以将这些像素转换为图像，然后将该图像用作 Kinetic.Image 的来源。

// create an image from the existing canvas

var canvas2Image=new Image();
canvas2Image.onload=function(){

    // create a Kinetic.Image using that image

    var kImage=new Kinetic.Image({
        x:0,
        y:0,
        width:canvas2Image.width,
        height:canvas2Image.height,
        image:canvas2Image
    });

}
canvas2Image.src=canvas.toDataURL();