Мне нужно несколько изображений в соответствии с пользователем нажмите кнопку - это должно быть JQuery

Question

Мне нужно получить несколько изображений круга, когда я нажимаю кнопку. и я сделал это с одним изображением, которое также можно перетаскивать.

но мне нужно несколько изображений для каждого пользователя, нажмите кнопку.

Должны ли мы сделать это с функцией добавления. Я использую холст тег в этом. если да, то как мы можем это реализовать.

<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, 0, 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>

Answer 1

Я придумал что-то, что не соответствует вашим потребностям, насколько я могу судить, но это может быть началом: 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, 0, 400, 400);
    for(var i = 0; i < circles.length; i++) {
        ctx.beginPath();
        ctx.arc(circles[i].x, circles[i].y, 50, 0, Math.PI*2);
        ctx.fillStyle = circles[i].c;
        ctx.fill();
    }
}