制作一个页面网格，可以用来把自己所做的UI和需求图片进行位置，像素比较

1. 引入jquery文件，需要依赖
2. 创建一个插件依赖的基础js文件
   

   <span style="font-family:Microsoft YaHei;">(function(){
   	var Gtx = function(arg) {
   		var ctx = arg;
   		if (arg.jquery) {
   			arg = arg.get(0);
   		}
   
   		if ($.isFunction(arg.getContext)) {
   			ctx = arg.getContext('2d');
   		}
   
   		if (!(this instanceof Gtx)) {
   			return new Gtx(ctx);
   		}
   
   		this.context = this.ctx = ctx;
   
   		if (!this.beginPath) {
   			setupPrototype();
   		}
   	}
   	
   	Gtx.version = "0.5.0-SNAPSHOT";
   
   	if ( typeof module === "object" && module && typeof module.exports === "object" ) {
   			module.exports = exports = Gtx;
   	} else if ( typeof define === "function" && define.amd ) {
   			define( "Gtx", [], function () { return Gtx; } );
   	} else {
   			window.Gtx = Gtx;
   	}
   
   	Gtx.prototype.fitParent = function() {
   		var canvas = this.canvas();
   		if (canvas) {
   			var canvas = this.canvas();
   			var $parent = $(canvas).parent();
   			// we might want to use innerWidth/Height here.
   			canvas.width = $parent.width();
   			canvas.height = $parent.height();
   		}
   
   
   		return this;
   	}
   
   	Gtx.prototype.clear = function() {
   		if (this.canvas()) {
   			this.canvas().width = this.canvas().width;
   		}
   
   		return this;
   	}
   
   	Gtx.prototype.createLinearGradient = function(x0, y0, x1, y1) {
   		var ctxGradient = this.ctx.createLinearGradient(x0, y0, x1, y1);
   		var gtxGradient = new Gradient(ctxGradient);
   		return gtxGradient;
   	}
   
   	Gtx.prototype.createRadialGradient = function(x0, y0, r0, x1, y1, r1) {
   		var ctxGradient = this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
   		var gtxGradient = new Gradient(ctxGradient);
   		return gtxGradient;
   	}
   
   	Gtx.prototype.setFillStyle = function(arg) {
   		return setStyle(this, "fillStyle", arg);
   	}
   
   	Gtx.prototype.setStrokeStyle = function(arg) {
   		return setStyle(this, "strokeStyle", arg);
   	}
   
   	function setStyle(g, type, arg) {
   		if (!arg) {
   			return g.ctx[type];
   		}
   
   		if (arg.ctxGradient) {
   			arg = arg.ctxGradient;
   		}
   
   		g.ctx[type] = arg;
   		return g;
   	}
   
   	function Gradient(ctxGradient) {
   		this.ctxGradient = ctxGradient;
   	}
   
   	Gradient.prototype.addColorStop = function() {
   		this.ctxGradient.addColorStop.apply(this.ctxGradient, arguments);
   		return this;
   	}
   
   	Gradient.prototype.addColorStops = function() {
   		for ( var i = 0; (i + 1) < arguments.length; i += 2) {
   			this.ctxGradient.addColorStop(arguments[i], arguments[i + 1]);
   		}
   
   		return this;
   	}
   
   	function setupPrototype() {
   		var methods = [ 'beginPath', 'clip', 'closePath', 'drawImage', 'fill', 'fillText', 
   						 'arc','arcTo', 'lineTo', 'moveTo', 'bezierCurveTo', 'quadraticCurveTo', 'rect',
   						 'clearRect','fillRect','strokeRect','translate', 'rotate', 'save', 
   						 'scale', 'setTransform', 'stroke', 'strokeText', 'transform', 'setLineDash' ];
   
   		var getterMethods = [ 'createPattern', 'drawFocusRing', 'isPointInPath', 'measureText', 'getLineDash',
   							  'createImageData', 'getImageData', 'putImageData' 
   		];
   
   		var props = [ 'canvas',
   			'font', 'globalAlpha', 'globalCompositeOperation', 'lineCap', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'shadowColor', 'textAlign', 'textBaseline' ];
   
   		var gmethl, propl;
   		for ( var i = 0, methl = methods.length; i < methl; i++) {
   			var m = methods[i];
   			Gtx.prototype[m] = (function(m) {
   				return function() {
   					this.ctx[m].apply(this.ctx, arguments);
   					return this;
   				};
   			}(m));
   		}
   
   		for (i = 0, gmethl = getterMethods.length; i < gmethl; i++) {
   			var gm = getterMethods[i];
   			Gtx.prototype[gm] = (function(gm) {
   				return function() {
   					return this.ctx[gm].apply(this.ctx, arguments);
   				};
   			}(gm));
   		}
   
   		for (i = 0, propl = props.length; i < propl; i++) {
   			var p = props[i];
   			Gtx.prototype[p] = (function(p) {
   				return function(value) {
   					if (typeof value === 'undefined') {
   						return this.ctx[p];
   					}
   					this.ctx[p] = value;
   					return this;
   				};
   			}(p));
   		}
   	}
   
   })();</span>

   
   
3. 创建显示和隐藏grid的js文件
   

   <span style="font-family:Microsoft YaHei;">var app = app || {};
   
   $(function(){
   	var $gridSystem = $("body").find(".debug-grid-system");
   	if($gridSystem.length == 0){
   		$("body").append($("<div class='debug-grid-system'><div class='debug-grid-system-canvas'><canvas width='0' height='0'/></div><span class='toggleGrid'>!!!</span></div>"));
   		$gridSystem = $("body").find(".debug-grid-system");
   	}
   
   	drawGrid();
   
   	function drawGrid(){
   		var $canvas = $gridSystem.find("canvas");
   		if($canvas.length == 0){
   			return;
   		}
   		var gtx = Gtx($canvas);
   		gtx.fitParent();
   
   		var width = $canvas.width();
   		var height = $canvas.height();
   		var unitWidth = 8;
   		var unitHeight = 8;
   
   		gtx.setStrokeStyle("rgba(221,221,221,.6)");
   		gtx.lineWidth(1);
   		for(var i = 0; i * unitWidth < width; i++){
   			gtx.beginPath();
   			gtx.moveTo((i + 1) * unitWidth, 0);
   			gtx.lineTo((i + 1) * unitWidth, height);
   			gtx.stroke();
   		}
   
   		for(var i = 0; i * unitHeight < height; i++){
   			gtx.beginPath();
   			gtx.moveTo(0, (i + 1) * unitHeight);
   			gtx.lineTo(width, (i + 1) * unitHeight);
   			gtx.stroke();
   		}
   	}
   
   	$("body").on("click", ".debug-grid-system .toggleGrid", function(){
   		var $canvasDiv = $gridSystem.find(".debug-grid-system-canvas");
   		if($canvasDiv.is(":visible")){
   			$canvasDiv.hide();
   		}else{
   			$canvasDiv.show();
   			drawGrid();
   		}
   	});
   
   	$("body").on("click", ".debug-grid-system canvas", function(){
   		var $canvasDiv = $gridSystem.find(".debug-grid-system-canvas");
   		$canvasDiv.hide();
   	});
   
   });</span>

   
   
4. 然后是css文件
   

   <span style="font-family:Microsoft YaHei;">.debug-grid-system {
     z-index: 9999;
   }
   .debug-grid-system-canvas {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     position: fixed;
     z-index: 9998;
     display: none;
   }
   .debug-grid-system .toggleGrid {
     cursor: pointer;
     position: absolute;
     right: 10px;
     bottom: 10px;
     top: auto;
     width: 20px;
     height: 20px;
     font-size: 20px;
     opacity: .2;
     z-index: 9999;
   }
   </span>

   
   
5. 最后是一个测试的html页面
   

   <span style="font-family:Microsoft YaHei;"><html>
   
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>grid</title>
   <link rel="stylesheet" href="1_uigrid.css" type="text/css">
   <script src="0_jquery.min.js"></script>
   <script src="1_gtx.js"></script>
   <script src="2_uigrid.js"></script>
   </head>
   
   <body>
   <p>点击右下角的"!!!"显示和隐藏页面网格，谢谢</p>
   </body>
   
   </html>
   </span>

   
   注意：三个js文件的加载顺序就是我列出的顺序
   
   效果图