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

蔚落 2023-10-17 23:36 104阅读 0赞

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