캔버스 : 끊김없는 곡선

Question

canvas에 선 그리기를 구현했습니다. 하지만 문제가 생겼습니다 : 선폭이 작 으면 (3), 곡선이 좋게 보일 때

;
선폭이 큰 경우 (20), 끊김으로 인해 곡선이 좋지 않은 것처럼 보입니다.

canvas.node.onmousemove = function (e) { 
     if (!canvas.isDrawing) { 
      return; 
     } 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     ctx.beginPath(); 
     ctx.moveTo(canvas.lastX, canvas.lastY); 
     ctx.strokeStyle = '#000000'; 
     ctx.lineWidth = self.lineWidth(); 
     ctx.lineTo(x, y); 
     ctx.stroke(); 
     ctx.closePath(); 
     canvas.lastX = x; 
     canvas.lastY = y; 
}; 
canvas.node.onmousedown = function (e) { 
     canvas.isDrawing = true; 
     canvas.lastX = e.pageX - this.offsetLeft; 
     canvas.lastY = e.pageY - this.offsetTop; 
}; 
canvas.node.onmouseup = function (e) { 
     canvas.isDrawing = false; 
}; 

어떻게 큰 선에서 휴식을 방지하고 내 라인은 고체 만들 수 있습니까?
감사합니다.

Answer 1

캔버스 컨텍스트에 lineJoin 속성을 설정해 보셨습니까?

lineWidth을 설정 한 후 다음 줄을 추가하십시오.

ctx.lineJoin = 'round'; 

이 것 당신이 이 ctx.closePath()를 사용하여 모든 lineTo 년대 렌더링을 완료하기 전에 경로를 폐쇄가 아닌 경우 작동합니다.

당신은 당신이 선을 그리기 시작 전에 경로 을 열고 당신이 선을 그리기 완료 후 을 종료해야합니다.

드로잉 중에 moveTo을 사용하여 드로잉 커서를 움직이면 lineJoin이 적용되지 않습니다.

다음 수정 된 코드를 사용해 볼 수 있습니다 (마지막에는 JSFiddle 링크가 포함되어 있습니다).

EDIT 1 : 코드를 업데이트하여 lineJoin 속성을 추가하는 것을 잊었습니다.

EDIT 2 :moveTo 행을 적절한 수신기 메소드로 이동했습니다.

canvas.node.onmousemove = function (e) { 
     if (!canvas.isDrawing) { 
      return; 
     } 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 

     ctx.lineTo(x, y); 
     ctx.stroke(); 

     canvas.lastX = x; 
     canvas.lastY = y; 
}; 
canvas.node.onmousedown = function (e) { 
     canvas.isDrawing = true; 
     canvas.lastX = e.pageX - this.offsetLeft; 
     canvas.lastY = e.pageY - this.offsetTop; 

     ctx.moveTo(canvas.lastX, canvas.lastY); 
     ctx.beginPath(); 
     ctx.strokeStyle = '#000000'; 
     ctx.lineWidth = self.lineWidth(); 
     ctx.lineJoin = 'round'; 

}; 
canvas.node.onmouseup = function (e) { 
     ctx.closePath(); 
     canvas.isDrawing = false; 
}; 

근무 JSFiddle here.