HTML Canvas：填充基于弧的复杂形状

Question

下面是一个 JSON 结构，它绘制具有不同起点和终点角度的弧

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var elementDetail =  {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]}
    
ctx.beginPath();
elementDetail.element.map((elem, index) => {
  ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);  
})

ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#6fd0ff";
ctx.fill();

canvas{ zoom:.25}

<canvas id="myCanvas" width="1200" height="1200"></canvas>

我需要得到的形状是这样的：

我能够遍历 json 并填充绘制描边，但无法在形状内填充颜色

我需要帮助来用颜色填充形状

谢谢

Answer 1

为了避免奇怪的结果，在复杂的形状中，我宁愿分两步进行绘图：

• 实体渲染：绘制并填充形状
• 轮廓渲染：绘制形状外笔画

注意：绘制圆弧时，您需要知道ctx.arc() 将创建一个line，从当前路径的最后一个坐标到圆弧的第一个位置。 为了避免，需要调用moveTo()将绘图笔抬到圆弧的第一个位置。

var elementDetail =  {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]}

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d")

// draw the solid body
ctx.beginPath();
elementDetail.element.map((elem, index) => {     
  ctx.moveTo(0,0);
  ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);   
})
ctx.fillStyle = "#6fd0ff";
ctx.fill();
ctx.closePath();

// draw the outline
elementDetail.element.map((elem, index) => {  
  ctx.beginPath();
  ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);   
  ctx.stroke();
})
ctx.closePath();

canvas{ zoom:.25}

<canvas id="myCanvas" width="1200" height="1200"></canvas>

Answer 2

您是否尝试过使用context.fillStyle="your shape colour"？ 我认为您可能会使用路径来构建形状，因此每次启动路径时，都需要为每个形状分配颜色。 尝试分别绘制圆弧和多边形。

function drawGraphics(ctx){
  ctx.beginPath();
  ctx.fillStyle="#6fd0ff"
  elementDetail.element.reverse().map((elem, index) => {
      if(elem.type==="ARC"&&index<=8){
        ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta); 
      }
  })
  ctx.stroke()
  ctx.fill();
  ctx.closePath();
}