캔버스 스트로크 안정적으로 변하지 않습니까?

Question

여기 내 코드가 있습니다. 어떤 이유로 그것은 주로 회색으로 선을 그립니다.

그리기 호출이 실제로 겹치지 않아도 일부 선이 서로 위에 두 획 스타일로 그려지는 것처럼 보일 것입니다. 일부 선은 내부 회색으로 흰색입니다. 내 흰색 선은 내 회색 선보다 두껍기 때문에 분명히 두 선을 그립니다. 캔버스 그리기 호출이 비동기식입니까?

왜 그런가?

 for (var i=0; i<minor_lanes.length; i++) { 
      connect(minor_lanes[i], "#333", 3); 
     } 

     for (var i=0; i<major_lanes.length; i++) { 
      connect(major_lanes[i], "#fff", 4); 
     } 

     for (var i=0; i<limited_lanes.length; i++) { 
      connect(limited_lanes[i], "#FFFF99", 2); 
     } 

     function connect(id, color, width) { 
      if (!id) { 
       return; 
      } 
      ctx.lineWidth = width; 
      ctx.strokeStyle = color; 
      $('#' + id).each(function() { 
      var laneX = parseInt($(this).css('left')) + $(this).width()/2; 
      var laneY = parseInt($(this).css('top')) + $(this).height()/2; 
      ctx.moveTo(x,y); 
      ctx.lineTo(laneX, laneY); 
      ctx.stroke(); 
      }); 
     } 

Answer 1

난 당신이

ctx.beginPath(); 
// draw path 
// stroke 
ctx.closePath();