1.定義div

  <div style="height:240px;" >                           
          <div id="conditionCol"></div>                                                         
          <canvas id="can"  height="230px" style="display:none">                 
                       該瀏覽器不支援html5，推薦使用chrome！    
           </canvas>              
     </div>    

2.根據需要包裹的div的寬度動態設定canvas的寬度（注意點：目前只支援原生的document.getElementById方式設定，jquery方式不支援）

        $("#can").css({"display":"block"});     
         var width = $("#conditionCol").width(); 
         document.getElementById("can").width = width-5;    //減去邊框的寬度    

3.根據座標畫圖：

 can = document.getElementById('can');  
      context = can.getContext('2d');
      var width = $("#conditionCol").width();  
      context.clearRect(0,0,width,230);                               
      for (var i = 0; i < xmAttaLineArr.length; i++) {
          drawLinePath(xmAttaLineArr[i]);         
      }  

    //根據某個點畫出線條的方法
    function drawLinePath(xmAttaLine) {               
      var point = pointsMap.get(xmAttaLine);   
      context.save();
      context.translate(0.5,0.5);
      context.lineWidth = 2;           
      context.strokeStyle = 'red';      
      context.beginPath();           
      context.moveTo(point.startX, point.startY);   
      context.lineTo(point.endX,point.endY);        
      context.stroke();
      context.restore();
    }