畫布上的線條從另一個功能

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>