HTML5 캔버스 패턴 간격

Question

저는 createPattern 함수에서 패턴으로 사용하려는 캔버스 요소를 동적으로 생성하고 있습니다. 그러나 패턴의 실제 크기는 정수 값이 아니라 동적 크기의 소수점입니다. 물론 십진수 크기의 캔버스 요소를 만드는 것은 불가능합니다.

질문 : 캔버스에 패턴 타일 사이에 10 진수 간격을 둘 수 있습니까?

Answer 1

상자 밖에서는 불가능합니다. 가능한 해결책은 그러나이 -

는 다음을 수행 할 수 있습니다, 원하는 간격을 가정 할 수 있습니다 0.5 픽셀입니다 :

• 패턴 이미지 플러스 간격에 대한 별도의 픽셀의 두 배 크기의 캔버스를 만듭니다.
• 는
• 규모는 주 캔버스를 변환 패턴으로 캔버스를 설정, 여기 (모든 좌표가이 경우에 2 배를 조정해야 함) ctx.scale(0.5, 0.5);
• 설정 채우기 스타일을하고 스케일 위치와 영역을 채울 것입니다. 예를 들면 다음과 같습니다.
  10, 10 ~ 100, 100의 영역을 채우려면 실제 축척에 따라 20, 20에서 200, 200 등을 사용해야하고 원점이 번역되지 않는다고 가정해야합니다.

크기 조정을 수행하면 패턴이 하위 픽셀이되어 "소수점 이하 자릿수"모양이 나타납니다. 이후에 원래의 스케일로 다시 스케일하는 것을 잊지 마십시오 (간단한 해결책은 save()/restore()를 사용하십시오).

간격을 0.33으로 설정하려면 3을 인수로, 4를 0.25로 사용하십시오.