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

Question

我需要在单击圆形按钮时创建圆形，就像油漆中的圆形一样。需要绘制用户需要的数量。

如何使用 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>

Answer 1

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
});

这应该在 Canvas 上绘制 2 个圆圈。冲洗并重复。