Line Style

Line Style

 

• lineWidth
  - 패스 선 두께를 지정하는 속성
  - 숫자만 입력하며 px로 적용
  - 기본값 1px
• lineCap
  - 선의 가장자리 스타일을 지정하는 속성
  - 값 : butt (기본) / round / square
  

  const canvas12 = document.getElementById('canvas12');
  const ctx12 = canvas12.getContext('2d');
  ctx12.lineWidth=10;ctx12.strokeStyle='coral';
  
  ctx12.beginPath();
  ctx12.lineCap = 'butt';
  ctx12.moveTo(50,100);ctx12.lineTo(550,100);
  ctx12.stroke();
  
  ctx12.beginPath();
  ctx12.lineCap = 'round';
  ctx12.moveTo(50,200);ctx12.lineTo(550,200);
  ctx12.stroke();
  
  ctx12.beginPath();
  ctx12.lineCap = 'square';
  ctx12.moveTo(50,300);ctx12.lineTo(550,300);
  ctx12.stroke();​

• lineJoin
  - 두 개 이상의 선이 접하는 모서리 스타일을 지정하는 속성
  - 값 : mitter (기본) / bevel / round
  

  const canvas13 = document.getElementById('canvas13');
  const ctx13 = canvas13.getContext('2d');
  ctx13.lineWidth=20;ctx13.lineCap='round';
  ctx13.strokeStyle = gra3;
  
  ctx13.beginPath();
  ctx13.moveTo(50,300);ctx13.lineTo(100,100);ctx13.lineTo(150,300);
  ctx13.lineJoin = 'miter';
  ctx13.stroke();
  
  ctx13.beginPath();
  ctx13.moveTo(250,300);ctx13.lineTo(300,100);ctx13.lineTo(350,300);
  ctx13.lineJoin = 'round';
  ctx13.stroke();
  
  ctx13.beginPath();
  ctx13.moveTo(450,300);ctx13.lineTo(500,100);ctx13.lineTo(550,300);
  ctx13.lineJoin = 'bevel';
  ctx13.stroke();​

• setLineDash(segments)
  - 현재 선의 대시 패턴 설정하는 메소드
  - segments 배열 형식으로 점선에서 선이 그려지는 부분과 그렇지 않은 부분으로 구성되는 패턴 형식을 지정
    ▷ [3] : 선과 공백의 길이 모두 3px로 지정
    ▷ [2,3] : 선의 길이는 2px이고 공백의 길이는 3px로 지정
    ▷ [5,4,3,2] : 두 종류의 점선 패턴이 반복되는데 첫 번째 선의 길이는 5px이고 공백의 길이는 4px, 두 번째 선의 길이는 3px이고 공백의 길이는 2px로 지정
  

  const canvas12 = document.getElementById('canvas12');
  const ctx12 = canvas12.getContext('2d');
  ctx12.lineWidth=10;ctx12.strokeStyle='coral';
  
  ctx12.beginPath();
  ctx12.lineCap = 'butt';
  ctx12.moveTo(50,100);ctx12.lineTo(550,100);
  ctx12.setLineDash([20]);
  ctx12.stroke();
  
  ctx12.beginPath();
  ctx12.lineCap = 'round';
  ctx12.moveTo(50,200);ctx12.lineTo(550,200);
  ctx12.setLineDash([20,40]);
  ctx12.stroke();
  
  ctx12.beginPath();
  ctx12.lineCap = 'square';
  ctx12.moveTo(50,300);ctx12.lineTo(550,300);
  //ctx12.setLineDash([20,40,30,50]);
  ctx12.setLineDash([]); // 초기화 시킨다.
  ctx12.stroke();​