画布上的彩色的弧

Question

I want to draw sectors with different colors and radiuses. So I write some code using canvas.arc and fill methods

// 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();

The problem is when next sector is drawing, previous one change color too. So at the end I have sectors with different radius but with the same (last) color.

Possibly there is more simple way to do the same stuff?

Answer 1

Just add beginPath() before drawing the new arc:

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

What happens if not is that path objects are accumulated. The next time a fill/stroke is used, all paths objects are filled/stroked. This happens independent on clearing the canvas, so the path needs to be cleared using the beginPath() .

Hope this helps - see update below:

 // 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

Path drawing commands begin with context.beginPath and remain in effect until the next context.beginPath . So without a new beginPath all of your previous wedges will be redrawn with the last wedge.

So the simple fix is to make sure each of your wedges begin with 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>