setLineDash( [int d, int m] )
선의 점선모양 만들기
- 인자 = d
- 설명 : 점선의 길이
- 인자 = m
- 설명 : 점선과 점선의 거리
선의 모양중 점선을 만들어 주는 함수 입니다. 두개의 인자가 있으며 인자는 인덱스 배열로 설정합니다. 첫번째 인자는 점선중 점(선이 그어지는)의 길이를 설정합니다. 두번째 인자는 점과 점의 거리를 설정합니다.
선 스타일중 lineDashOffset이라는 속성이 있는데 선의 위치를 설정합니다. 정수는 시계반대 방향으로 이동이며 음수는 시계방향 이동입니다.
아래의 예제는 점의길이 4px, 점과점의 거리 2px의 점선을 그리고 lineDashOffset으로 점선에 에니메이션 효과를 준 예제입니다.
점선그리기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <script type="text/javascript" src="/_include/Lib/jquery/jquery-2.1.4.min.js"></script> <style> html, body {height:100%; width:100%; padding:0px; margin:0px;} </style> <script> var offset = 0; function draw(){ var ctx = document.getElementById('canvas').getContext('2d'); var bsx = getDashBox( ctx ); //console.log( bsx.getLineDash() ); offset++; if (offset > 16) { offset = 0; } setTimeout(draw, 20); } function getDashBox( ctx ){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.setLineDash( [4,2] ); ctx.lineDashOffset = -offset; ctx.strokeRect( 10,10,100,100 ) return ctx; } </script></head><body onload="draw();"><canvas id="canvas" width="200" height="190" />캔버스 미지원 브라우저 입니다.</canvas></body></html> |
DEMO
'Develop > canvas' 카테고리의 다른 글
| 18. createPattern - 패턴만들기 (0) | 2015.08.10 |
|---|---|
| 17. gradient - 선과 면에 그라디언트 주기 (0) | 2015.08.10 |
| 15. lineStyle - lineJoin 선의 연결지점(모서리)의 모양 (0) | 2015.08.10 |
| LineStyle - lineCap 선의 끝점모양 (0) | 2015.06.30 |
| LineStyle - lineWidth 라인스타일 (0) | 2015.06.30 |