填充 html5 画布上两条贝塞尔曲线下的区域

Question

This is my first time using html canvas, and I am a little stumped with this one. I am trying to build an image like this on an html canvas:

Html canvas

This is what I have tried so far, and I can't seem to fill the areas beneath the lines with the appropriate color. in particular, I tried context.fill(); .

Here is a stackblitz of the working example that I have, minus the fills beneath the lines.

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

Answer 1

To be able to fill something on the canvas you actually need to define that area completely . If you just mimic the look of the curves, you have an open path only and it merely fills the 'area' that lies in-between the start & end point.

The fix is simple though - just add two more straight lines [C, D] that make up the rectangular shape below the curve and you're good to go.

Here's a working example based on your stackblitz code (just click on 'Run code snippet'):

 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>