Javascript 如何动态添加另一个图像？使用画布

我可以使用caman函数（动态）添加图像

下面的函数正在图像上添加锚

        function update(activeAnchor) {
           ....            }

        function addAnchor(group, x, y, name, dragBound) {
           ...
        }
  function radians(degrees) {
           ..
        }

        function degrees(radians) {
           ..
        }

        function angle(cx, cy, px, py) {
          ...
        }

        function distance(p1x, p1y, p2x, p2y) {
           ...
        }

        function getRotatingAnchorBounds(pos, group) {
          ...
        }

这是我可以在重复画布中加载带有锚点的图像的函数

function initStage(image) {
 var stage = new Kinetic.Stage({
                container: 'loginDiv',
                width: 800,
                height: 500,
            });

            var layer = new Kinetic.Layer();

            var bg = new Kinetic.Rect({
                width: stage.getWidth(),
                height: stage.getHeight(),
                x: 0,
                y: 0
            });

            layer.add(bg);

            layer.on('mousedown', function (e) {
                var node = e.targetNode;
                select(node);
            });

            var darthVaderGroup = new Kinetic.Group({
                x: 5,
                y: 5,
                draggable: true,
                fill: 'black'
            });

            layer.add(darthVaderGroup);
            stage.add(layer);
 var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            var img = new Image();
            // img.onload = start;
            img.crossOrigin = "anonymous";
            img.src = image;
            // alert(img.src);


            // draw the star image to the offscreen canvas
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            var darthVaderImg = new Kinetic.Image({
                x: 0,
                y: 0,
                //image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
                //image: image.darthVader,
                image: canvas,
                // draggable: true,
                width: 780,
                height: 480,
                name: 'image',
                stroke: '#F8F0F0',
                strokeWidth: 7, 
                fill: '#F8F0F0' 

            });

            darthVaderGroup.add(darthVaderImg);
            addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
            addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');

            darthVaderGroup.on('dragstart', function () {
                this.moveToTop();
            });
            // layer.add(darthVaderImg);
            // layer.draw();
            stage.draw();
}

我可以使用canvas动态添加图像&通过调用initStage（image）加载图像

我想通过调用相同的函数来添加另一个图像。可能吗

---

如果您有任何帮助，我们将不胜感激。

您希望为您的功能输入什么？链接/名称或者你知道要添加什么图片吗？谢谢鲁本。！我想动态添加另一个图像（添加另一层图像）。可能吗？

function initStage(image) {
 var stage = new Kinetic.Stage({
                container: 'loginDiv',
                width: 800,
                height: 500,
            });

            var layer = new Kinetic.Layer();

            var bg = new Kinetic.Rect({
                width: stage.getWidth(),
                height: stage.getHeight(),
                x: 0,
                y: 0
            });

            layer.add(bg);

            layer.on('mousedown', function (e) {
                var node = e.targetNode;
                select(node);
            });

            var darthVaderGroup = new Kinetic.Group({
                x: 5,
                y: 5,
                draggable: true,
                fill: 'black'
            });

            layer.add(darthVaderGroup);
            stage.add(layer);
 var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            var img = new Image();
            // img.onload = start;
            img.crossOrigin = "anonymous";
            img.src = image;
            // alert(img.src);


            // draw the star image to the offscreen canvas
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            var darthVaderImg = new Kinetic.Image({
                x: 0,
                y: 0,
                //image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
                //image: image.darthVader,
                image: canvas,
                // draggable: true,
                width: 780,
                height: 480,
                name: 'image',
                stroke: '#F8F0F0',
                strokeWidth: 7, 
                fill: '#F8F0F0' 

            });

            darthVaderGroup.add(darthVaderImg);
            addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
            addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');

            darthVaderGroup.on('dragstart', function () {
                this.moveToTop();
            });
            // layer.add(darthVaderImg);
            // layer.draw();
            stage.draw();
}