jquery - 需要在 Canvas 上像绘制应用程序一样创建多个圆圈

单击圆按钮时，我需要创建一个圆，就像绘画中的圆一样。需要根据用户需要绘制。

如何通过使用Jquery，HTML5和CSS3来工作？？？

我需要一个类似this的应用程序：

任何人都知道这请帮助我
我为单个圆圈创建了事件，该事件可拖动。如何在该部分添加更多图像。

<script>
function draw_circle() {

 var canvasObj = document.getElementById("mycanvas");

 var canvasCtx = canvasObj.getContext("2d");

 canvasCtx.beginPath();

 canvasCtx.arc(100,100,50,0,Math.PI*2,true);

    var centerX = 288;
    var centerY = 100;
    var radius = 70;


    canvasCtx.fillStyle = "#CB5155";
    canvasCtx.fill();
    canvasCtx.lineWidth = 5;
    canvasCtx.strokeStyle = "black";
    canvasCtx.stroke();

}

    $(function() {
        $( "#mycanvas" ).draggable();
    });


</script>

<canvas id="mycanvas" width="200" height="200"/></canvas>

最佳答案

jCanvas jQuery插件是一个潜在的解决方案。

$('#mycanvas').drawArc({
  fillStyle: '#CB5155',
  x: 288, y: 100,
  radius: 70,
  strokeStyle: 'black',
  lineWidth: 5
});

$('#mycanvas').drawArc({
  fillStyle: '#442299',
  x: 188, y: 70,
  radius: 30,
  strokeStyle: 'blue',
  lineWidth: 2
});

那应该在画布上画两个圆。冲洗并重复。