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

#div1 {

width: 400px;

height: 400px;

}

转载自canvas画田字格与米字格

你的浏览器不支持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();

}