html 5 캔버스의 채우기 및 스토크 너비 문제

Question

닫힌 모양을 그리고 싶습니다 (경로 사용) & 스트로크 너비가 10입니다. 이제 채우기를 원합니다. fill() 함수를 사용하여 채울 수 있습니다. 문맥. 그러나, 내 모양의 알파를 변경하려면 모양의 경계에서 획이 채우기 영역 &을 누릅니다.

뇌졸중 후 검은 색으로 남아있는 모양 영역 만 채우기를 원합니다. 내 문제를 설명하는 이미지가 붙어 있습니다.

Click here to show shape with stork & fill bug.

당신이 jsfiddle에서 볼 수 있듯이

, - 영역 중첩의 색상 혼합 컬러입니다. 그건 내가 원하지 않는다. 테두리와 정확히 같거나 알파가있는 획 색상이 필요합니다. - 폐쇄 경로의 채우기 영역을 지정할 수 없습니다. (contexx 메서드가 없습니다.) - 내 응용 프로그램에서 1 캔버스에 둘 이상의 도형을 그리기 때문에 "glabalCompositeOperation"을 사용할 수 없습니다. .

Answer 1

효과는 캔버스가 선 모양을 그리는 방식의 속성 인 것으로 보입니다. 선의 두께의 절반이 모양 안쪽에 그려지고 절반은 모양 바깥쪽에 그려집니다. 한 가지 방법은 채워진 모양과 테두리를 별도의 패스로 그립니다. 귀하의 예를 위해 변경 한 사항은 아래와 같습니다. 이는 불규칙한 모양으로는 더 어려울 것입니다.

  var canvas = document.getElementById("myCanvas"); 
      var context = canvas.getContext("2d"); 
      var topLeftCornerX = 188; 
      var topLeftCornerY = 50; 
      var width = 200; 
      var height = 100; 
      var linewidth = 10; 

      context.globalAlpha = 0.5; 
      context.beginPath(); 
      context.moveTo(topLeftCornerX, topLeftCornerY); 
      context.lineTo(topLeftCornerX+width,topLeftCornerY); 
      context.lineTo(topLeftCornerX+width,topLeftCornerY+height); 
      context.lineTo(topLeftCornerX,topLeftCornerY+height); 
      context.closePath(); 
      context.fillStyle = "#FF0000"; 
      context.fill(); 
      context.beginPath(); 
      context.moveTo(topLeftCornerX-linewidth/2, topLeftCornerY-linewidth/2); 
      context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY-linewidth/2); 
      context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY+height+linewidth/2); 
      context.lineTo(topLeftCornerX-linewidth/2,topLeftCornerY+height+linewidth/2); 
      context.closePath(); 
      context.lineWidth = linewidth; 
      context.strokeStyle = "#00FF00"; 
      context.stroke();