Develop/canvas

16. setLineDash() - 점선만들기

GuriZzang 2015. 8. 10. 15:26

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.


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