畫布Javascript：gridDraw（ctx）功能不工作不會在Chrome上產生錯誤

Question

請幫忙弄清爲什麼這不起作用。 drawTest函數（顯示爲概念證明）可用，但不是drawGrid函數。我究竟做錯了什麼？

'use strict'; 
window.onload = init; 
function init() { 
    let can = document.getElementById('canvas'); 
    let ctx = can.getContext('2d'); 
    drawTest(ctx); 
    drawGrid(ctx); 
} 

function drawTest(ctx) { 
    ctx.fillStyle = 'rgb(200, 0, 0)'; 
    ctx.fillRect(10, 10, 50, 50); 
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; 
    ctx.fillRect(30, 30, 50, 50); 
} 

function drawGrid(ctx, elSize = 10, width = .3, color = 'green') { 
    ctx.lineWidth = width; 
    ctx.stroke.style = color; 
    var lineX = ctx.width/elSize - 1; 
    var lineY = ctx.height/elSize - 1; 
    for (var i = 1; i <= lineX; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(elSize * i, 0); 
     ctx.lineTo(elSize * i, ctx.height); 
     ctx.stroke(); 
    } 
    for (var i = 1; i <= lineY; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(0, elSize * i); 
     ctx.lineTo(ctx.width, elSize * i); 
     ctx.stroke(); 
    } 
} 

Answer 1

上下文不具有寬度，因此ctx.width和ctx.height是不確定的。相反，請使用ctx.canvas.width和ctx.canvas.height。

function drawGrid(ctx, elSize = 10, width = .3, color = 'green') { 
    ctx.lineWidth = width; 
    ctx.stroke.style = color; 
    var lineX = ctx.canvas.width/elSize - 1; 
    var lineY = ctx.canvas.height/elSize - 1; 
    for (var i = 1; i <= lineX; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(elSize * i, 0); 
     ctx.lineTo(elSize * i, ctx.canvas.height); 
     ctx.stroke(); 
    } 
    for (var i = 1; i <= lineY; i++) { 
     ctx.beginPath(); 
     ctx.moveTo(0, elSize * i); 
     ctx.lineTo(ctx.canvas.width, elSize * i); 
     ctx.stroke(); 
    } 
} 

fiddle