Question

我想要做的事情实际上很安静，但我是javascript的新手，非常非常适合画布。

closePath将关闭我的圈子并且不会起作用，因为我试图在每个圈子里面制作多个圈子。

所有数据都是通过json提供的。

我想做的一个例子就在这里。 http://portfolio.amir-meshkin.com/linepie.png

ctx.fill();    
ctx.closePath();

Answer 1

您需要使用arc（）函数并了解其工作

arc函数的语法是

arc(x, y, radius, startAngle, endAngle, counterClockwise);

适用于您的方案的工作演示：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
     
function draw(radius,color){

      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = radius;
      var startAngle =0;
      var endAngle = 2 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      // line color
      context.strokeStyle = color;
      context.stroke();
}

draw(75,"yellow");
draw(65,"red");
draw(55,"green");

<canvas id="myCanvas" width="578" height="250"></canvas>

需要使用画布弧创建不同大小的圆圈

1 个答案: