html编写田字格,canvas画田字格与米字格

#div1 {

width: 400px;

height: 400px;

}

var oCanvas = document.getElementById(cs);

if (oCanvas.getContext) {

var ctx = oCanvas.getContext(2d),

l = 0,

w = oCanvas.width,

half = w / 2,

quarter = w / 4,

span = 5; //每条虚线的实线部分长度为5

ctx.strokeStyle = #000;

ctx.lineWidth = 2;

//ctx.strokeRect(1, 1, w - 2, w - 2);

ctx.moveTo(1, 1);

ctx.lineTo(w-1, 1);

ctx.moveTo(1, w-1);

ctx.lineTo(w-1, w-1);

// ctx.moveTo(1, 1);

// ctx.lineTo(1, w-1);

ctx.moveTo(w-1, 1);

ctx.lineTo(w-1, w-1);

ctx.stroke();

//依次调用看效果!

//drawReal(ctx);

//drawUnReal(ctx);

//drawUnRealNB(ctx);

drawSimpleUnreal(ctx);

}

//画虚线简单做法，有兼容性问题！

function drawSimpleUnreal(ctx) {

ctx.save();

ctx.lineWidth = 1;

ctx.beginPath();

//画布增强功能(注意兼容性，嵌入到ios safari4.3.3有问题！)http://msdn.microsoft.com/zh-cn/library/ie/dn265037(v=vs.85).aspx

//IE11+/safari7+

//ctx.setLineDash([12,3,3,3]); //创建12像素长，间隔为3像素 + 3像素长，间隔为3像素的点划线

ctx.setLineDash([5, 5]); //创建5像素长，间隔为5像素的虚线

//横线

ctx.moveTo(0, half);

ctx.lineTo(w, half);

//竖线

ctx.moveTo(half, 0);

ctx.lineTo(half, w);

//交叉线1

ctx.moveTo(0, 0);

ctx.lineTo(w, w);

//交叉线2

ctx.moveTo(0, w);

ctx.lineTo(w, 0);

ctx.strokeRect(quarter - 1, quarter - 1, half - 2, half - 2);

ctx.stroke();

ctx.closePath();

ctx.restore();

}

#div1 { width: 400px; height: 400px; } 转载自 你的浏览器不支持canvas! var oCanvas = document.getElementById(cs); if (oCanvas.getContext) { var ctx = oCanvas.getContext(2d), l = 0, w = oCanvas.width, half = w / 2, quarter = w / 4, span = 5; //每条虚线的实线部分长度为5 ctx.strokeStyle = #000; ctx.lineWidth = 2; //ctx.strokeRect(1, 1, w - 2, w - 2); ctx.moveTo(1, 1); ctx.lineTo(w-1, 1); ctx.moveTo(1, w-1); ctx.lineTo(w-1, w-1); // ctx.moveTo(1, 1); // ctx.lineTo(1, w-1); ctx.moveTo(w-1, 1); ctx.lineTo(w-1, w-1); ctx.stroke(); //依次调用看效果! //drawReal(ctx); //drawUnReal(ctx); //drawUnRealNB(ctx); drawSimpleUnreal(ctx); } //画虚线简单做法，有兼容性问题！ function drawSimpleUnreal(ctx) { ctx.save(); ctx.lineWidth = 1; ctx.beginPath(); //画布增强功能(注意兼容性，嵌入到ios safari4.3.3有问题！)http://msdn.microsoft.com/zh-cn/library/ie/dn265037(v=vs.85).aspx //IE11+/safari7+ //ctx.setLineDash([12,3,3,3]); //创建12像素长，间隔为3像素 + 3像素长，间隔为3像素的点划线 ctx.setLineDash([5, 5]); //创建5像素长，间隔为5像素的虚线 //横线 ctx.moveTo(0, half); ctx.lineTo(w, half); //竖线 ctx.moveTo(half, 0); ctx.lineTo(half, w); //交叉线1 ctx.moveTo(0, 0); ctx.lineTo(w, w); //交叉线2 ctx.moveTo(0, w); ctx.lineTo(w, 0); ctx.strokeRect(quarter - 1, quarter - 1, half - 2, half - 2); ctx.stroke(); ctx.closePath(); ctx.restore(); }