避免html5画布中三角形之间的间隙

oxosxuxt  于 2022-10-22  发布在  HTML5
关注(0)|答案(1)|浏览(135)

我正在尝试使用径向梯度调整二维可见性算法,但我无法填补空白,请看这个小提琴https://jsfiddle.net/j9gu16L4/7/

//before that i draw images to simulate fog
const gradient = context.createRadialGradient(200, 100, 40, 200, 100, 100);
gradient.addColorStop(0, "rgba(0, 0, 0, 1)");
gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.5)");
gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
context.globalCompositeOperation = "destination-out";
context.beginPath();
context.moveTo(200, 100);
context.lineTo(280, 150);
context.lineTo(170, 240);
context.fillStyle = gradient;
context.fill();
context.beginPath();
context.moveTo(200, 100);
context.lineTo(170, 240);
context.lineTo(90, 120);
context.fill();

我试着用笔划,但在三角形之间留下了一条黑线
有小费吗?

7xllpg7q

7xllpg7q1#

与其画2个形状并填充,不如画1个并填充。。。

context.beginPath();
context.moveTo(170, 240);
context.lineTo(90, 120);
context.lineTo(200,100);
context.lineTo(280, 150);
context.closePath();
context.fillStyle = gradient;
context.fill();

相关问题