曲線下方的HTML5畫布填充區域

Question

我必須繪制圖形並在其下填充區域。 請檢查屏幕截圖：

[！[在此處輸入圖片描述] [1]] [1]

有誰知道用透明的右邊框填充這個數字？ 謝謝

代碼是

      context.beginPath()
      ... 
      context.lineTo(lastX, lastY);
     // context.moveTo(lastX, dimensions.height);  /* this doesnt work*/
      context.lineTo(lastX, dimensions.height);    /* so I have to jump from (lastX,lastY) to (lastX,dimensions.height) without drawing line. Idk how to do it without breaking fillpath */

      context.lineTo(firstX, dimensions.height);
      context.fillStyle = 'rgb(12,34,56)';
      context.fill();
      context.stroke(); /* this makes border wide */
      ...
      context.closePath()

Answer 1

一種簡單的方法是分別繪制綠色區域和藍色線。 首先，完全執行上面的操作，但沒有context.stroke(); ，然后使用stroke()而不是fill()在頂部重復該行。