时间戳

首页 > 解决方案 > HTML Canvas：填充基于弧的复杂形状

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

问题描述

下面是一个 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 并填充绘制描边，但无法在形状内填充颜色

我需要帮助以颜色填充形状

谢谢

标签： javascripthtmlhtml5-canvas

解决方案

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

  • 实体渲染：绘制和填充形状
  • 轮廓渲染：绘制形状外描边

注意：绘制圆弧时，您需要知道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>

推荐阅读