javascript - 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() .