需要在画布中创建多个圆形,如绘画应用程序

时间:2011-05-30 10:33:56

标签: jquery html5 css3

点击圆形按钮时,我需要创建圆圈,就像画中的圆圈一样。需要绘制尽可能多的用户需求。

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

1 个答案:

答案 0 :(得分:3)

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

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

相关问题