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

Question

是否可以填充二次曲线？

\n\n

我是画布新手，我想填充我在 context.quadraticCurveTo() 中绘制的上部部分的颜色，但是当我尝试 context.fill() 时，它没有填充我的预期部分。我想填充画布的上半部分，该部分被笔划分开。

\n\n

请参阅随附的片段。

\n\n

\r\n

\r\n

const canvas = document.getElementById(\'canvas\');\r\nconst ctx = canvas.getContext(\'2d\');\r\nconst ch = canvas.height;\r\nconst cw = canvas.width;\r\n\r\n// Quadratic B\xc3\xa9zier curve\r\nctx.beginPath();\r\nctx.moveTo(0, 60);\r\nctx.quadraticCurveTo(ch, 0, cw, 35);\r\nctx.stroke();\r\nctx.fill();

\r\n

#canvas {\r\n  border: 1px solid;\r\n}

\r\n

<canvas id="canvas"></canvas>

\r\n

\r\n

\r\n

\n

Answer 1

最简单的方法可能只是沿着画布边缘画一些线来形成一个封闭的形状：

\n\n

\n\n

\r\n

\r\n

const canvas = document.getElementById(\'canvas\');\r\nconst ctx = canvas.getContext(\'2d\');\r\nconst ch = canvas.height;\r\nconst cw = canvas.width;\r\n\r\n// Quadratic B\xc3\xa9zier curve\r\nctx.beginPath();\r\nctx.moveTo(0, 60);\r\nctx.quadraticCurveTo(ch, 0, cw, 35);\r\nctx.lineTo(cw, 0);   // these two lines\r\nctx.lineTo(0, 0);    // are new\r\n                     // you can even add a third one that goes from 0,0\r\n                     // to 0,60 \xe2\x80\xa6 but .fill() closes the shape even without it\r\nctx.stroke();\r\nctx.fill();

\r\n

#canvas {\r\n  border: 1px solid;\r\n}

\r\n

<canvas id="canvas"></canvas>

\r\n

\r\n

\r\n

\n