Javascript 从其他函数绘制时画布线不保留

我不明白为什么我的线条没有画出来。我正在尝试合并两张“图纸”

• 网格（画得非常好）
• 还有几条线（画得也很好）

但是当我把这两个结合在一起时，我失去了我的界限，或者它们“似乎”没有被画出来

*请注意，我有两个函数，每个函数获取上下文。同样，我可以画一个，但不能画另一个（它们不能在画布上组合）。另外，阅读另一个StackOverflow问题（由add a beginPath（）回答），没有区别。而且是无用的

我错过了什么/做错了什么

var canvas=document.getElementById（“canvasId”）；
画布宽度=300；
帆布高度=300；
var ctx=canvas.getContext（“2d”）；
printLogContext（ctx）；
console.log（`uuuuuuuuuuuuuuuuuuuuuuuuuuuuuu`）；
ctx.beginPath（）；
//牵引格栅（ctx，300300）；
牵引轴（ctx）；
牵引格栅（ctx，300300）；
函数drawAxes（上下文）{
printLogContext（context）；
context.beginPath；
context.strokeStyle=“000000”；
context.beginPath（）；
context.moveTo（0150）；
lineTo（300150）；
上下文。moveTo（150,0）；
lineTo（150300）；
stroke（）；
closePath（）；
}
功能绘图网格（ctx、宽度、高度）{
var阶跃=10；
ctx.strokeStyle=“#E5F7F6”；
//重置转换（ctx）；
对于（变量行=0；行<宽度；行=行+步长）{
ctx.moveTo（0，行）；
ctx.lineTo（宽度，行）；
ctx.stroke（）；
}
对于（变量col=0；col

---

这两个函数都很好

问题是黑色轴被浅蓝色网格覆盖

如果更改函数的顺序，也将看到轴

（定义颜色时，即使是黑色，也必须使用

#

）

var canvas=document.getElementById（“canvasId”）；
画布宽度=300；
帆布高度=300；
var ctx=canvas.getContext（“2d”）；
printLogContext（ctx）；
console.log（`uuuuuuuuuuuuuuuuuuuuuuuuuuuuuu`）；
牵引格栅（ctx，300300）；
牵引轴（ctx）；
函数drawAxes（上下文）{
printLogContext（context）；
context.strokeStyle=“#000000”；
context.beginPath（）；
context.moveTo（0150）；
lineTo（300150）；
上下文。moveTo（150,0）；
lineTo（150300）；
stroke（）；
closePath（）；
}
功能绘图网格（ctx、宽度、高度）{
var阶跃=10；
ctx.strokeStyle=“#E5F7F6”；
//重置转换（ctx）；
对于（变量行=0；行<宽度；行=行+步长）{
ctx.moveTo（0，行）；
ctx.lineTo（宽度，行）；
ctx.stroke（）；
}
对于（变量col=0；col

---

天哪，我觉得自己很愚蠢。如果你看，我确实试过按正确的顺序做。之后我把它注释掉了。我以为我有那个标志。脸掌！谢谢你的眼睛！如果可以，请继续。。。有没有办法让黑线一直在那里（不使用图像或其放置顺序）？@TinklePooplebottham我真的不知道，因为我只在简单的事情上使用画布。似乎在

ctx.beginPath（）

和

ctx.closePath（）

中包装每一行（在两个循环中）将允许轴显示出来（它被部分覆盖），但我无法解释为什么……没问题，我脑子里有一些想法，我必须尝试保存/恢复上下文。我还是很感激。