<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线段</title> </head> <body> <canvas id="canvas"> </canvas> </body> <script> var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); context.save(); drawGird(context,'lightgray',10,10); context.restore(); context.lineWidth=1; context.beginPath(); context.moveTo(10,10); context.lineTo(100,10); context.stroke(); context.beginPath(); context.moveTo(10.5,30.5); context.lineTo(100.5,30.5); context.stroke(); function drawGird(context, color, stepX, stepY) { context.strokeStyle = color; context.lineWidth = 0.5; for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, context.canvas.height); context.stroke(); } for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) { context.beginPath(); context.moveTo(0, i); context.lineTo(context.canvas.width, i); context.stroke(); } } </script> </html>
