Javascript 首次使用函数加载的图像在再次使用该函数时隐藏_Javascript_Jquery_Fabricjs

Javascript 首次使用函数加载的图像在再次使用该函数时隐藏

javascript jquery

Javascript 首次使用函数加载的图像在再次使用该函数时隐藏,javascript,jquery,fabricjs,Javascript,Jquery,Fabricjs,用于拖放和调整大小的JavaScript。现在，当我点击一个按钮，我可以在画布上加载一个图像，它是可拖动的。但是，当我第二次单击时，第一个图像消失，新的图像即将出现，我想要两个图像。这是我正在使用的代码： <html> <head> <script src="fabric.min.js"></script> </head> <body> <canvas id="c"></canvas>

用于

拖放

和

调整大小

的JavaScript。现在，当我点击一个按钮，我可以在画布上加载一个图像，它是可拖动的。但是，当我第二次单击时，第一个图像消失，新的图像即将出现，我想要两个图像。这是我正在使用的代码：

<html>
<head>
    <script src="fabric.min.js"></script>
</head>
<body>
    <canvas id="c"></canvas>
    <img src="icon_03.jpg" id="my-image">
    <button onclick="myFunction()">click</button>
    <script>
        function myFunction() {
            var canvas = new fabric.Canvas('c');
            var imgElement = document.getElementById('my-image');
            var imgInstance = new fabric.Image(imgElement, {
                left: 100,
                top: 100,
                angle: 30,
                opacity: 0.85
            });
            canvas.add(imgInstance);
        };
    </script>
</body>
</html>


点击
函数myFunction（）{
var canvas=newfabric.canvas（'c'）；
var imgElement=document.getElementById（'my-image'）；
var imgInstance=新结构图像（imgElement{
左:100,，
前100名，
角度：30，
不透明度：0.85
});
canvas.add（imgInstance）；
};

我认为问题在于，您正在函数中创建一个canvas对象，因此始终存在一个新的canvas，该canvas是空的，并在现有的canvas上绘制。我更新了你的小提琴，因此每当你点击按钮时，画布上就会添加一个新图像：

这是我的代码：

var canvas  = new fabric.Canvas('c');
$('#image').click(myFunction);
function myFunction() {
            var imgElement = document.getElementById('my-image');
            var imgInstance = new fabric.Image(imgElement, {
                left: 100,
                top: 100,
                angle: 30,
                opacity: 0.85
            });
            canvas.add(imgInstance);
};

我希望我能帮助你。：）