我需要每个用户单击按钮的多个图像-它应该是jQuery

如何解决我需要每个用户单击按钮的多个图像-它应该是jQuery

|| 单击按钮时，我需要获取多个圆形图像。我只用一张图像就做到了，那也是可拖动的。 但我需要每个用户单击按钮的多个图像。 我们应该使用append函数来做到这一点。我在使用画布标签。如果是这样，我们如何实现这一目标。

<script>

$(document).ready(function() {

  $(\'#pink-circle-button\').click(function() {
    $(\'#currentCircle\').show();

                   });
            });

    $(function() {
        $( \"#currentCircle\" ).draggable();
    });

    $(document).ready(function(){
    $(\"button#pink-circle-button\").click(function(){
    $(\"p\").append(\"<canvas id=\'currentCircle\' class=\'drawCircle\'/>\");
  });
});
</script>

<style>
.drawCircle{border: 2px solid rgb(255,255);background-color:black; position: fixed; display: none; top: 97px; left: 572px; width: 153px; height: 150px; border-radius: 76.5px 76.5px 76.5px 76.5px;}
</style>


<canvas id=\"currentCircle\" class=\'drawCircle\'/></canvas>

    

解决方法

        据我所知，我编造的内容无法满足您的需求，但这可能是一个开始：http：//jsfiddle.net/eGjak/2/。

var ctx = $(\'#cv\').get(0).getContext(\'2d\');

$(\'body\').bind(\'selectstart\',function() {return false});

var Circle = function() {
    this.x = Math.random() * 400;
    this.y = Math.random() * 400;
    this.c = \'rgb(\' + Math.floor(Math.random() * 256) + \',\' +
                 Math.floor(Math.random() * 256) + \',\' +
                 Math.floor(Math.random() * 256) + \')\';
};

var circles = [];

function d(xp,yp,x,y) {
    return Math.sqrt((x-xp)*(x-xp) + (y-yp)*(y-yp));
}

$(\'button\').click(function() {
    circles.push(new Circle);
    render();
});

var currindex = -1;

$(\'#cv\').mousedown(function(e) {
    bx = e.offsetX,by = e.offsetY;
    for(var i = 0; i < circles.length; i++) {
        if(d(circles[i].x,circles[i].y,e.offsetX,e.offsetY) < 50) {
            currindex = i;
            tx = circles[i].x;
            ty = circles[i].y;
        }
    }
});

var bx = 0,by = 0,tx = 0,ty = 0;

$(\'#cv\').mouseup(function(e) {
    currindex = -1;
});

$(\'#cv\').mousemove(function(e) {
    if(currindex > -1) {
        circles[currindex].x = tx + (e.offsetX - bx);
        circles[currindex].y = ty + (e.offsetY - by);
    }
    render();
});

function render() {
    ctx.clearRect(0,400,400);
    for(var i = 0; i < circles.length; i++) {
        ctx.beginPath();
        ctx.arc(circles[i].x,50,Math.PI*2);
        ctx.fillStyle = circles[i].c;
        ctx.fill();
    }
}