HTML5 Canvas填充曲线下的区域

HTML5 Canvas fill area under the curve

本文关键字：区域 曲线 Canvas 填充 HTML5      更新时间：2023-09-26

我必须绘制图形并在其下方填充区域。请查看截图:

[![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()

一种简单的方法是分别绘制绿色区域和蓝色线。首先，完全按照上面的方法做，但不使用context.stroke();，然后重复上面的行，使用stroke()但不使用fill()。

相关文章：