canvas 上的彩色圆弧

Question

我想用不同的颜色和半径绘制扇区。所以我使用 canvas.arc 和填充方法

编写了一些代码

// constants & vars
var data=[0.2, 0.5, .5, 1.0, 0.8, .9, .7, .8];
var colors=["red", "blue", "green", "gray", "orange", 
            "rgb(255,165,0)", "rgb(100,100,100)", "black"];
var WIDTH = 200; 
var HEIGHT = 200;
var centralPoint = {x:WIDTH/2, y:HEIGHT/2};
var radius=HEIGHT/2;
var sectorsCount = data.length;
var epsilon=0.0001;
var myCanvas = document.getElementById("graphic"),
    ctx     = myCanvas.getContext('2d');
    myCanvas.height=HEIGHT;
    myCanvas.width=WIDTH;

//drawing
    for (var i=0; i<sectorsCount-1;i++) {
        ctx.moveTo(centralPoint.x, centralPoint.y);
        ctx.fillStyle=colors[i];
        ctx.arc(centralPoint.x,centralPoint.y, 
            radius*data[i], 
            i*2*Math.PI/sectorsCount+epsilon , 
            (i+1)*2*Math.PI/sectorsCount-epsilon,
             false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    ctx.fillStyle="black";
    ctx.arc(centralPoint.x,centralPoint.y, 10, 0, Math.PI*2, true);
    ctx.fill();

问题是在绘制下一个扇区时，前一个扇区也会变色。所以最后我有不同半径但具有相同（最后）颜色的扇区。

可能有更简单的方法来做同样的事情？

Answer 1

在绘制新弧之前添加beginPath():

for (var i=0; i<sectorsCount-1;i++) {
    ctx.beginPath();     // <--- needs beginPath() here
    ctx.moveTo(centralPoint.x, centralPoint.y);

如果不是，路径对象会累积。下次使用 fill/stroke 时，所有路径对象都是 filled/stroked。这与清除 canvas 无关，因此需要使用 beginPath().

清除路径

希望这对您有所帮助 - 请参阅下面的更新：

// constants & vars
var data=[0.2, 0.5, .5, 1.0, 0.8, .9, .7, .8];
var colors=["red", "blue", "green", "gray", "orange", "rgb(255,165,0)", "rgb(100,100,100)", "black"];
var WIDTH = 200; 
var HEIGHT = 200;
var centralPoint = {x:WIDTH/2, y:HEIGHT/2};
var radius=HEIGHT/2;
var sectorsCount = data.length;
var epsilon=0.0001;
var myCanvas = document.getElementById("graphic"),
    ctx     = myCanvas.getContext('2d');
    myCanvas.height=HEIGHT;
    myCanvas.width=WIDTH;

//drawing
    for (var i=0; i<sectorsCount-1;i++) {
        ctx.beginPath();
        ctx.moveTo(centralPoint.x, centralPoint.y);
        ctx.fillStyle=colors[i];
        ctx.arc(centralPoint.x,centralPoint.y, 
            radius*data[i], 
            i*2*Math.PI/sectorsCount+epsilon , 
            (i+1)*2*Math.PI/sectorsCount-epsilon,
             false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
    }
    ctx.fillStyle="black";
    ctx.arc(centralPoint.x,centralPoint.y, 10, 0, Math.PI*2, true);
    ctx.fill();

<canvas id="graphic" />

Answer 2

路径绘制命令以 context.beginPath 开头，并在下一个 context.beginPath 之前一直有效。因此，如果没有新的 beginPath，您之前的所有楔形都将使用最后一个楔形重新绘制。

所以简单的解决方法是确保每个楔形以 beginPath:

开头

var data=[0.2, 0.5, .5, 1.0, 0.8, .9, .7, .8];
var colors=["red", "blue", "green", "gray", "orange", "rgb(255,165,0)", "rgb(100,100,100)", "black"];
var WIDTH = 200; 
var HEIGHT = 200;
var centralPoint = {x:WIDTH/2, y:HEIGHT/2};
var radius=HEIGHT/2;
var sectorsCount = data.length;
var epsilon=0.0001;
var myCanvas = document.getElementById("graphic"),
    ctx     = myCanvas.getContext('2d');
myCanvas.height=HEIGHT;
myCanvas.width=WIDTH;

//drawing
for (var i=0; i<sectorsCount-1;i++) {
  ctx.beginPath();
  ctx.moveTo(centralPoint.x, centralPoint.y);
  ctx.fillStyle=colors[i];
  ctx.arc(centralPoint.x,centralPoint.y, 
          radius*data[i], 
          i*2*Math.PI/sectorsCount+epsilon , 
          (i+1)*2*Math.PI/sectorsCount-epsilon,
          false);
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}
ctx.fillStyle="black";
ctx.beginPath();
ctx.arc(centralPoint.x,centralPoint.y, 10, 0, Math.PI*2, true);
ctx.fill();

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="graphic" width=300 height=300></canvas>

canvas 上的彩色圆弧

Colored arcs on canvas

html

javascript

canvas