html5网格坐标系,在画布HTML5上绘制网格/表格

答案取自

Grid drawn using a element looking stretched

刚刚编辑了一下,希望它有所帮助

// Box width

var bw = 400;

// Box height

var bh = 400;

// Padding

var p = 10;

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

function drawBoard(){

for (var x = 0; x <= bw; x += 40) {

context.moveTo(0.5 + x + p,p);

context.lineTo(0.5 + x + p,bh + p);

}

for (var x = 0; x <= bh; x += 40) {

context.moveTo(p,0.5 + x + p);

context.lineTo(bw + p,0.5 + x + p);

}

context.strokeStyle = "black";

context.stroke();

}

drawBoard();