需要在画布中创建多个圆圈，如绘画应用程序 [英] Need to create mutiple circle in a canvas like a paint application

问题描述

我需要在点击圆圈按钮时创建圈子，例如油漆中的圆圈。需要绘制尽可能多的用户需要。

I need to create circle when clicking in the circle button,like the circle in paint. Need to draw as many as the user need.

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

How to work that by using Jquery, HTML5 and CSS3???

我需要像这这样的应用程式：

I need an application like this:

任何人都知道这一点请帮助我
我创建了单圈的事件，这是可拖动的。如何在该部分添加更多图片。

Any body know this please help me And i created event for single circle and that is draggable one. How to add more more images in that section.

<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插件是一个潜在的解决方案。

jCanvas jQuery plugin is a potential solution.

$('#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
});

这应该在画布上画2个圆圈。冲洗并重复。

That should draw 2 circles on the canvas. Rinse and repeat.

这篇关于需要在画布中创建多个圆圈，如绘画应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！