Question

我想我只需要表明：

＆＃13;

function drawSector(ctx, cxy, rInner, rOuter, radStart, radWidth, color) {
	ctx.beginPath();
	ctx.arc(cxy, cxy, rInner, radStart, radStart + radWidth);
	ctx.lineTo(cxy + rOuter * Math.cos(radStart + radWidth), cxy + rOuter * Math.sin(radStart + radWidth));
	ctx.arc(cxy, cxy, rOuter, radStart + radWidth, radStart, true);
	ctx.lineTo(cxy + rInner * Math.cos(radStart), cxy + rInner * Math.sin(radStart));
	ctx.fillStyle = color;
	ctx.fill();
	ctx.stroke();
}
function makecircle(diam) {
	var canv = document.createElement("canvas");
    canv.width = diam; canv.height = diam;
	document.getElementById("c").appendChild(canv);
	
	var ctx = canv.getContext("2d");
	ctx.strokeStyle = "rgba(0,0,0,1)";
	ctx.lineWidth = 5;
	
	
	var centerXY = diam / 2;
	var centerRadius = diam / 6;
	var sectorHeight = (centerXY - centerRadius) / 5 - 2;
	var sectorAngle = Math.PI * 2 / 15;
	
	for (var r = 0; r < 15; r++) {
		for (var h = 0; h < 5; h++) {
			drawSector(ctx, centerXY, centerRadius + sectorHeight * h, centerRadius + sectorHeight * (h + 1), r * sectorAngle, sectorAngle, "rgba(255,0,0,0.5)");
		}
	}
	
	
}

makecircle(500);

＆＃13;

body {
    background-color:darkgreen;
  }

＆＃13;

<div id="c"></div>

＆＃13;

所以这个圈子被划分为扇区。我希望每个扇区之间有一点空间（目前以黑色笔划表示）。切割每个扇区的高度/角度宽度，但由于它是一个恒定的角度，它向外扩展，我不喜欢这个外观。

我认为必须有一种方法可以在圆圈上绘制笔划并使该区域再次变得透明，是吗？（我也不能单独填写每个扇区，因为我要使它们的颜色不同）。

Answer 1

你可以＆＃34;擦除＆＃34;通过设置globalCompositeOperation='destination-out'来确定现有像素。

然后绘制你的辐射线。辐射线将擦除线条重叠的任何现有像素，而不是可见。

当您完成删除操作时，请务必将globalCompositeOperation设置回其默认值＆quot;来源＆＃39;。

使用透明度在画布上分隔弧段

1 个答案: