Javascript 如何在画布中填充二次曲线？

可以填充二次曲线吗

我是画布上的新手，我想填充context.quadraticCurveTo（）中绘制的上半部分的颜色，但当我尝试context.fill（）时，它并没有填充我期望的部分。我想填充画布上被笔划隔开的部分

请参阅附加的代码段

const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const ch=画布高度；
const cw=画布宽度；
//二次Bézier曲线
ctx.beginPath（）；
ctx.moveTo（0,60）；
四次曲线（ch，0，cw，35）；
ctx.stroke（）；
ctx.fill（）
#画布{
边框：1px实心；
}
最简单的方法可能是沿着画布边缘画一些线，以形成闭合形状：



const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const ch=画布高度；
const cw=画布宽度；
//二次Bézier曲线
ctx.beginPath（）；
ctx.moveTo（0,60）；
四次曲线（ch，0，cw，35）；
ctx.lineTo（cw，0）；//这两条线
ctx.lineTo（0，0）；//是新的
//您甚至可以添加从0,0开始的第三个值
//到0,60…但是.fill（）即使没有形状也会关闭形状
ctx.stroke（）；
ctx.fill（）
#画布{
边框：1px实心；
}
最简单的方法可能是沿着画布边缘画一些线，以形成闭合形状：



const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
const ch=画布高度；
const cw=画布宽度；
//二次Bézier曲线
ctx.beginPath（）；
ctx.moveTo（0,60）；
四次曲线（ch，0，cw，35）；
ctx.lineTo（cw，0）；//这两条线
ctx.lineTo（0，0）；//是新的
//您甚至可以添加从0,0开始的第三个值
//到0,60…但是.fill（）即使没有形状也会关闭形状
ctx.stroke（）；
ctx.fill（）
#画布{
边框：1px实心；
}