画布上的线条从另一个功能

Question

我不明白为什么我的线是不能画绘画时不能呆在这。我正在试图结合2'图纸'。

• 网格（平得很清楚）。
• 一些其他的线（也很好地绘制）。

但是当我结合2，我失去了我的线条，或者他们似乎没有得到绘制。

*请注意，我有2个功能，各获得上下文。再次，我可以绘制一个，但不能绘制另一个（它们不在画布上）。另外，阅读另一个StackOverflow问题，通过添加一个beginPath（）来回答，没有区别。 this one是无用的。

我缺少/做错了吗？

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>