HTML5 Canvas填充曲线下方的区域

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()重复顶部的行。