Javascript HTML画布：如何给线条图下的区域着色？

我正在尝试创建一个山形图（折线图和下面的区域是阴影），但是，无论我尝试什么，阴影区域都没有覆盖整个区域。因为我的图表是一个开放路径，所以在穿过图表线的区域中填充结果

下面是我放在W3School上显示问题的示例代码

我在同一行上也看到了一些其他问题，但遵循这些问题也会导致同样的问题

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0150）；
ctx.lineTo（100,70）；
ctx.lineTo（150100）；
ctx.lineTo（200140）；
ctx.lineTo（250,90）；
ctx.lineTo（300110）；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.stroke（）

您的浏览器不支持HTML5画布标记。
类似于：


/
/*external.css*/
html，正文{
填充：0；边距：0；
}
梅因先生{
宽度：940px；填充：20px；边距：0自动；
}
#图表{
宽度：300px；高度：150px；
}

图表
就像：


/
/*external.css*/
html，正文{
填充：0；边距：0；
}
梅因先生{
宽度：940px；填充：20px；边距：0自动；
}
#图表{
宽度：300px；高度：150px；
}

图表
您只需先
stroke（）
您的路径，然后
lineTo（lastX，canvasHeight）；lineTo（firstX，画布高度）fill（）
之前执行code>

这样，填充区域将始终覆盖所有底部区域。

如果只想填充到最大Y值，而不是画布的底部，则可以从点中获取此最大Y值（以下代码段中的注释部分）：


const width=canvas.width；
const height=canvas.height；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle='红色'；
函数plotPoints（）{
常数pts=生成点（32）；
//首先绘制笔画
点forEach（（pt）=>ctx.lineTo（pt.x，pt.y））；
ctx.stroke（）；
//现在定义填充区域的底部
const maxY=height；//Math.max.apply（null，pts.map（pt=>pt.y））；
//画出缺失的部分
ctx.lineTo（pts[pts.length-1].x，maxY）；//右下角
ctx.lineTo（pts[0].x，maxY）；//左下角
ctx.globalCompositeOperation=“目的地结束”；//落后
ctx.fill（）；//将为我们关闭路径
ctx.globalCompositeOperation=“源代码结束”；//正常行为
}
plotPoints（）；
函数生成点（nbOfPoints）{
常数pts=[]；
对于（设i=0；i您只需在调用
fill（）之前先
stroke（）
您的路径，然后
lineTo（lastX，canvasHeight）；lineTo（firstX，canvasHeight）；

这样，填充区域将始终覆盖所有底部区域。

如果只想填充到最大Y值，而不是画布的底部，则可以从点中获取此最大Y值（以下代码段中的注释部分）：


const width=canvas.width；
const height=canvas.height；
const ctx=canvas.getContext（'2d'）；
ctx.fillStyle='红色'；
函数plotPoints（）{
常数pts=生成点（32）；
//首先绘制笔画
点forEach（（pt）=>ctx.lineTo（pt.x，pt.y））；
ctx.stroke（）；
//现在定义填充区域的底部
const maxY=height；//Math.max.apply（null，pts.map（pt=>pt.y））；
//画出缺失的部分
ctx.lineTo（pts[pts.length-1].x，maxY）；//右下角
ctx.lineTo（pts[0].x，maxY）；//左下角
ctx.globalCompositeOperation=“目的地结束”；//落后
ctx.fill（）；//将为我们关闭路径
ctx.globalCompositeOperation=“源代码结束”；//正常行为
}
plotPoints（）；
函数生成点（nbOfPoints）{
常数pts=[]；
对于（设i=0；i）您在画布的下角缺少一个点。以
ctx.lineTo（300150）结束
在
ctx.fllStyle
之前。这个问题问得不好。@PHPglue，很抱歉，你的回答不好，上面的评论不是很有品味。为什么？因为你通过修改要求来回答。我给了5行，并要求填充下面的区域。你为什么要从你这边再加一行？这说明你不是aw是山形图。在修改我的原始要求之前，你可以要求澄清，只是为了回答。你只是在画布的下角缺少一个点。以
ctx.lineTo（300150）结束
在
ctx.fllStyle
之前。这个问题问得不好。@PHPglue，很抱歉，你的回答不好，上面的评论不是很有品味。为什么？因为你通过修改要求来回答。我给了5行，并要求填充下面的区域。你为什么要从你这边再加一行？这说明你不是aw是山图。在修改我的原始要求之前，您可以要求澄清，只是为了回答。感谢您对我的帮助，但是，此解决方案对我没有帮助。您的场景之所以有效，是因为您的起点和终点都在图的末尾。在正常情况下，我们不会有这种情况。图不会从原始开始（0,0）始终且不会终止于（宽度、高度）。即使我试着把它放在那个里，它在图表上看起来会很奇怪，并且会显示错误的价格。所以，否决票是因为你们缺乏基本的数学知识。你们应该能够自己找出那个些x，y点在哪里。哈哈……上帝保佑你们……我不能取得你们的伟大成就。祝你们一生都成功。继续努力回答问题和帮助他人。感谢您对我的帮助。但是，此解决方案对我没有帮助。您的场景之所以有效，是因为您的起点和终点位于图表的末尾。在正常情况下，我们不会有这种情况。图表不会始终从（0,0）开始，也不会以（宽度、高度）结束.即使我试着把它放在那个里，它在图表上看起来会很奇怪，而且会显示错误的价格。所以否决票是无效的