使用canvas画线，在Js中动态设置高和宽

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();
    }