svg 캔버스를 이용하여 자유롭게 낙서를 할 수 있는 칠판을 만들어 보자.
컨테이너인 svg에 뷰포트를 width="400" height="400" 으로 주고,
뷰박스는 viewBox="0 0 400 400" 그리고 경계를 위한 스타일을 주었다.
이벤트 리스너들을 작성하여 svg에 부착하여,
마우스 또는 터치를 이용하여 자유롭게 그릴 수 있다.
랜덤하게 색깔을 선택하게 된다.
refresh를 하면 다른 색깔로 그릴 수 있다.
또는 ctrl + f5 단축키를 사용할 수 있다.
반응형
'svg' 카테고리의 다른 글
svg rounded rectangle ; animation (0) | 2023.11.08 |
---|---|
svg animation : bee animation using javascript (0) | 2023.11.07 |
SVG g event handler (2) | 2023.10.29 |
svg symbol tag, use tag (1) | 2023.10.28 |
svg animation with css animation (0) | 2023.10.27 |