<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css">
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1 { width: 400px; height: 400px; } </style></head><body><div id="div1"> <p>转载自<a href="http://blog.csdn.net/pvfhv/article/details/3481031" target="_blank">canvas画田字格与米字格</a> </p> <canvas width="160" height="160" id="cs">你的浏览器不支持canvas!</canvas></div><script type="text/javascript"> 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(); }</script></body></html>
