将空白画布修改为矩阵

Question

我知道<画布> </canvas>在必须添加形状的位置绘制空白区域。

在我的项目中，用户需要画一个矩阵，而不是空白。我怎么做？

Answer 1

这里是如何借鉴HTML画布的网格线：

演示：http://jsfiddle.net/m1erickson/DwdX6/

function drawGrid(lineCount){ 
    var xSpan=cw/lineCount; 
    var ySpan=cw/lineCount; 
    ctx.clearRect(0,0,cw,ch); 
    ctx.save(); 
    if(lineCount/2===parseInt(lineCount/2)){ 
     ctx.translate(.5,.5); 
    } 
    ctx.beginPath(); 
    for(var i=0;i<lineCount;i++){ 
     var x=(i+1)*xSpan; 
     var y=(i+1)*ySpan; 
     ctx.moveTo(x,0); 
     ctx.lineTo(x,ch); 
     ctx.moveTo(0,y); 
     ctx.lineTo(ch,y); 
    } 
    ctx.lineWidth=0.50; 
    ctx.stroke(); 
    ctx.restore(); 
}