从其他功能绘制时，画布线不会停留

Question

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

• 网格（绘制得很好）。
• 其他几条线（也绘制得很好）。

但是，当我将2相结合时，我的线条会丢失，或者它们不会“看起来”被吸引。

*请注意，我有2个函数，每个函数都有上下文。 同样，我可以绘制一个，但不能绘制另一个（它们不能在画布上合并）。 另外，阅读另一个StackOverflow问题，可以通过添加beginPath（）来回答，没有区别。 而且这个没用。

我想念/做错了什么？

 var canvas = document.getElementById("canvasId"); canvas.width = 300; canvas.height = 300; var ctx = canvas.getContext("2d"); printLogContext(ctx); console.log(`__________`); ctx.beginPath(); //drawGrid(ctx, 300, 300); drawAxes(ctx); drawGrid(ctx, 300, 300); function drawAxes(context) { printLogContext(context); context.beginPath; context.strokeStyle = "000000"; context.beginPath(); context.moveTo(0, 150); context.lineTo(300, 150); context.moveTo(150, 0); context.lineTo(150, 300); context.stroke(); context.closePath(); } function drawGrid(ctx, width, height) { var step = 10; ctx.strokeStyle = "#E5F7F6"; //resetTransform(ctx); for (var row = 0; row < width; row = row + step) { ctx.moveTo(0, row); ctx.lineTo(width, row); ctx.stroke(); } for (var col = 0; col < height; col = col + step) { ctx.moveTo(col, 0); ctx.lineTo(col, height); ctx.stroke(); } } function printLogContext(ctx) { (ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`); } 

 <canvas id="canvasId" style="border: solid"></canvas> 

Answer 1

这两个功能都很好。

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

如果更改功能的顺序，则也会看到该轴。

（ 您在定义颜色（甚至黑色 ） 时也必须使用# ）

 var canvas = document.getElementById("canvasId"); canvas.width = 300; canvas.height = 300; var ctx = canvas.getContext("2d"); printLogContext(ctx); console.log(`__________`); drawGrid(ctx, 300, 300); drawAxes(ctx); function drawAxes(context) { printLogContext(context); context.strokeStyle = "#000000"; context.beginPath(); context.moveTo(0, 150); context.lineTo(300, 150); context.moveTo(150, 0); context.lineTo(150, 300); context.stroke(); context.closePath(); } function drawGrid(ctx, width, height) { var step = 10; ctx.strokeStyle = "#E5F7F6"; //resetTransform(ctx); for (var row = 0; row < width; row = row + step) { ctx.moveTo(0, row); ctx.lineTo(width, row); ctx.stroke(); } for (var col = 0; col < height; col = col + step) { ctx.moveTo(col, 0); ctx.lineTo(col, height); ctx.stroke(); } } function printLogContext(ctx) { (ctx) ? console.log(`Have ctx`): console.log(`Don't habe ctx`); } 

 <canvas id="canvasId" style="border: solid"></canvas>