이 기사는 주로 점선을 그리는 html5 캔버스를 소개합니다. HTML5는 점선을 그린 방법을 제공하지 않습니다. 이 기사는 스택 오버 플로우 방법을 기반으로 수정됩니다. 필요한 친구는 그것을 참조 할 수 있습니다.
HTML5 Canvas는 그래픽을 그리는 데 많은 기능을 제공하지만 불행히도 Canvas API는 실선 (Lineto)을 그리는 기능 만 제공하지만 점선을 그리는 방법을 제공하지는 않습니다. 이러한 디자인은 때때로 큰 불편을 일으킬 수 있습니다. JavaScript에 대한 권위있는 가이드의 저자 인 David Flanagan은 특히 표준의 수정과 구현이 비교적 간단 할 때 그러한 결정이 문제가된다고 생각합니다. --http : //lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-may/011224.html).
스택 오버 플로우에서 Phrogz는 점선 (http://stackoverflow.com/questions/4576724/dotted-Stroke-in-canvas)의 자체 구현을 제공하며, 이는 점선을 엄격히 구현하는 것입니다 (PS는이 페이지의 Rod MacDougall의 단순화 된 버전이 더 좋다고 생각합니다). 그렇다면 점선을 그려야 할 경우 (아래 그림과 같이) 어떻게해야합니까?
다음은 내 자신의 구현으로 수평 및 수직 점 점선 도면만을 지원합니다. 슬래시 드로잉의 기능을 추가하려면 Phrogz와 Rod MacDougall의 방법을 참조 할 수 있습니다.
코드를 복사하십시오