HTML5 Canvas에서 점선을 그리는 다른 방법은 무엇입니까?

Question

질문 배경 : 다른 데이터와 함께 HTML 캔버스에 수직선과 수평선을 그려주는 사이트에서 작업하고 있습니다.   사용자가 보고서를 다운로드하려는 경우 해당 페이지를 PDF 파일로 변환 할 수 있습니다.   원래 우리는 그래프 값을 그리기 위해 하나의 기본 스타일 라인을 사용하고있었습니다.   최근에 그래프에 두 번째 유형의 데이터를 추가하고 두 번째 데이터 유형에 점선을 그릴 때 context.setLineDash([x,x])을 사용했습니다.   이것은 브라우저에서 잘 작동합니다.   그러나 PDF 변환기 소프트웨어가 파선으로 보고서를 변환하려고하면 파선이 결과 PDF에 나타나지 않습니다.

일부 문제 해결 후 setLineDash() 속성으로 문제가 좁혀졌습니다.   우리 변환기 변환기는 일반적인 스타일 선을 이해할 수 있지만 setLineDash() 속성을 이해하지 못합니다.   변환기 소프트웨어는 수년 전인 데다가 변환기의 업데이트 된 버전을 구입할 수 없다는 정보를 받았습니다.   나는 창조자로부터 우리 버전에 대한 지원이 없다는 것도 발견했다.

질문 :   내가 PDF 변환기 소프트웨어에 대한 우리의 HTML을 업데이트하거나 사람이 setLineDash()를 사용하지 않고 캔버스에 점선을 그릴 수있는 다른 방법의 예를 제공 할 수 있습니다, 직접 지원을받을 수없는 생각 때문에? K3N @

편집

, 당신은이 질문을 this other question의 중복을 표시 할 때 내가받은 알림의 지시 사항에 따라

, 나는 다른 방법을 설명하는 편집하고있다.

두 질문에 대한 답변이 유사 할 수도 있지만 제 질문은 귀하가 제시 한 질문의 중복이 아니라고 생각합니다.   두 질문 모두 캔버스에 점선을 그리는 방법을 요구하고 있음을 인정합니다.   그러나 다른 질문은 에 의해 점선을 구현하는 방법을 묻는 것입니다. 메서드입니다.   내 질문에 특히 setLineDash() 속성을 사용하여 점선을 그릴 수 없다고 명시되어 있습니다.  이 차이점은 가능한 답변을 제한하며 두 질문을 충분히 구별하는 것으로 충분하다고 생각합니다.

Answer 1

선분을 만들 수 있습니다.

이 함수는 dashArr에있는 정보에서 점선을 그릴 것입니다. 예를 들어 [2,2]는 2 픽셀을 긋고 2 픽셀 씩 그리고 반복합니다.

function dashedLine(x1,y1,x2,y2,dashArr){ 
    // get the normalised line vector from start to end 
    var nx = x2 - x1; 
    var ny = y2 - y1; 
    const dist = Math.sqrt(nx * nx + ny * ny); // get the line length 
    nx /= dist; 
    ny /= dist; 
    var dashIdx = 0; // the index into the dash array 
    var i = 0;  // the current line position in pixels 
    ctx.beginPath(); // start a path 
    while(i < dist){ // do while less than line length 
     // get the line seg dash length 
     var dashLen = dashArr[(dashIdx ++) % dashArr.length]; 
     // draw the dash 
     ctx.moveTo(x1 + nx * i, y1 + ny * i); 
     i = Math.min(dist,i + dashLen); 
     ctx.lineTo(x1 + nx * i, y1 + ny * i); 
     // add the spacing 
     i += dashArr[(dashIdx ++) % dashArr.length]; 
     if(i <= 0) { // something is wrong so exit rather than endless loop 
       break; 
     } 
    } 
    ctx.stroke(); // stroke 
} 

function dashedLine(x1,y1,x2,y2,dashArr){ 
 

 
     var nx = x2 - x1; 
 
     var ny = y2 - y1; 
 
     const dist = Math.sqrt(nx * nx + ny * ny); 
 
     nx /= dist; 
 
     ny /= dist; 
 
     var dashIdx = 0; 
 
     var i = 0; 
 
     ctx.beginPath(); 
 
     while(i < dist){ 
 
      var dashLen = dashArr[(dashIdx ++) % dashArr.length]; 
 
      ctx.moveTo(x1 + nx * i, y1 + ny * i); 
 
      i = Math.min(dist,i + dashLen); 
 
      ctx.lineTo(x1 + nx * i, y1 + ny * i); 
 
      i += dashArr[(dashIdx ++) % dashArr.length]; 
 
      if(i <= 0) { // something is wrong so exit rather than endless loop 
 
        break; 
 
      } 
 
     } 
 
     ctx.stroke() 
 
    } 
 
    
 
    
 
const ctx = canvas.getContext("2d"); 
 
dashedLine(0,0,300,150,[5,5]);

canvas { border : 2px solid black; }

<canvas id="canvas"></canvas>