我需要按用戶單擊按鈕多個圖像 - 它應該是jquery

Question

我需要獲得多個圓形圖像，當我點擊按鈕。我只用一幅圖像就可以做到這一點，而且這也是拖曳式的。

但我需要按用戶單擊按鈕多個圖像。

我們可以用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, 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(); 
    } 
}