SOURCE

 
var MyCanvas = function(boxObj, width, height) {
            //序号、计数
            this.index = arguments.callee.prototype.Count = (arguments.callee.prototype.Count || 0) + 1;
            var cvs = document.createElement("canvas");
            cvs.id = "myCanvas" + this.index;
            cvs.width = width || 1200;
            cvs.height = height || 1000;
            (boxObj || document.body).appendChild(cvs);
            //excanvas框架中针对ie加载canvas延时问题手动初始化对象
            if (typeof G_vmlCanvasManager != "undefined") G_vmlCanvasManager.initElement(cvs);
            //2D画布对象
            this.ctx = cvs.getContext("2d");
            /* * 绘制线条
            * @ops JSON对象，可按实际支持属性扩展，示例：  { lineWidth:1,strokeStyle:'rgb(255,255,255)' }      
            * @dotXY:{ x:0, y:0 } ||[{ x:0, y:0 },{ x:0, y:0 }]
            */
            this.drawLine = function(dotXY, ops) {
                this.ctx.beginPath(); 
                for (var att in ops) this.ctx[att] = ops[att];
                dotXY = dotXY.constructor == Object ? [dotXY || { x: 0, y: 0}] : dotXY;
                this.ctx.moveTo(dotXY[0].x, dotXY[0].y);
                for (var i = 1, len = dotXY.length; i < len; i++) this.ctx.lineTo(dotXY[i].x, dotXY[i].y);
                this.ctx.stroke();
            };
   
    	 // 网格
  			this.drawGrid = function (color, stepX, stepY, hasGrid) {
          ctx = this.ctx;
      if (hasGrid) {
        ctx.save();
        ctx.strokeStyle = color;
        ctx.lineWidth = 0.5;
        for (var i = stepX + 0.5;
            i < ctx.canvas.width; i += stepX) {
            ctx.beginPath();
            ctx.moveTo(i, 0);
            ctx.lineTo(i, ctx.canvas.height);
            ctx.stroke();
        }

        for (var i = stepY + 0.5;
             i < ctx.canvas.height; i += stepY) {
            ctx.beginPath();
            ctx.moveTo(0, i);
            ctx.lineTo(ctx.canvas.width, i);
            ctx.stroke();
        }

        ctx.closePath();
        ctx.restore();
      }
  }
        };



         var c1 = new MyCanvas();
c1.drawGrid('#cdcdcd', 20, 20, true);

        c1.drawLine([{x:50,y:50},{x:764.5,y:500}],{lineWidth:1,strokeStyle:'rgb(0,0,0)'});

c1.drawLine([{x:142.5,y:500, circle: true, text: 'G'},{x:650.5,y:427.84}],{lineWidth:1,strokeStyle:'rgb(0,0,0)'});

        c1.drawLine([{"x":950,"y":500},{"x":650,"y":500},{"x":650,"y":350},{"x":950,"y":500},{"x":650,"y":500},{"x":650,"y":650},{"x":650,"y":350},{"x":650,"y":350},{"x":50,"y":50},{"x":50,"y":50},{"x":764.59,"y":500},{"x":650,"y":500},{"x":142.5,"y":500},{"x":650,"y":427.5},{"x":393.79,"y":778.1},{"x":322.97,"y":778.09},{"x":764.59,"y":500},{"x":650,"y":650}],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //普通线

        //c1.drawLine([{ x: 200.5, y: 10 }, { x: 600.5, y: 200 }],{lineWidth:1,strokeStyle:'rgb(0,0,0)'}); //+0.5偏移