填充 html5 畫布上兩條貝塞爾曲線下的區域

Question

這是我第一次使用 html canvas，我對這個有點難。 我正在嘗試在 html 畫布上構建這樣的圖像：

html畫布

這是我到目前為止所嘗試的，我似乎無法用適當的顏色填充線條下方的區域。 特別是，我嘗試了context.fill(); .

這是我擁有的工作示例的堆棧閃電戰，減去線條下方的填充。

https://stackblitz.com/edit/js-troahu?file=index.js

Answer 1

為了能夠在畫布上填充某些內容，您實際上需要完全定義該區域。 如果您只是模仿曲線的外觀，那么您只有一條開放路徑，它只會填充起點和終點之間的“區域”。

修復很簡單 - 只需添加兩條直線 [C, D] 來構成曲線下方的矩形形狀，您就可以開始了。

這是一個基於您的 stackblitz 代碼的工作示例（只需單擊“運行代碼片段”）：

 var canvas = document.querySelector("canvas"); var context = canvas.getContext("2d"); function drawCurve(x, y, curves, canvasColor, strokeStyle) { context.beginPath(); context.moveTo(x, y); for (let i = 0; i < curves.length; i++) { let c = curves[i]; context.quadraticCurveTo(c[0], c[1], c[2], c[3]); } context.lineTo(canvas.width, canvas.height); context.lineTo(0, canvas.height); context.fillStyle = canvasColor; context.fill(); } drawCurve( 0, 45, [ [75, 27, 173, 44], [240, 50, 300, 35] ], "#98dbcc" ); drawCurve( 0, 35, [ [65, 65, 125, 45], [197, 20, 300, 45] ], "#00a780" );

 <div class="canvas-container"> <canvas id="canvas"></canvas> </div>