CanvasRenderingContext2D.lineJoin


             html5.jpg



설명


    CANVAS 에 선과 선의 연결 부분의 모양을 지정한다.


분류


    선 / 스타일


형태


    DOMSting CanvasRenderingContext2D.lineJoin


적용 가능 값


    round    : 둥근 모양으로 연결된다.

    bavel    : 연결된 부분이 단면으로 남는다.

    miter     : 연결한 흔적이 남지 않는다.


기본값


    miter


예제


<html> 

<head> 

     <script type="application/javascript">  

    function draw() { 

      var canvas = document.getElementById("canvas"); 

      if (canvas.getContext) { 

        var ctx = canvas.getContext("2d"); 

 

                  ctx.strokeStyle = "black"; 

                  ctx.lineWidth = 10;

 

                  ctx.lineJoin = "round";

                  ctx.beginPath();

                  ctx.moveTo( 10, 10);

                  ctx.lineTo( 90, 10);

                  ctx.lineTo( 90, 90);

                  ctx.stroke();

                 

                  ctx.lineJoin = "bevel";

                  ctx.beginPath();

                  ctx.moveTo( 110, 10);

                  ctx.lineTo( 190, 10);

                  ctx.lineTo( 190, 90);

                  ctx.stroke();

 

                  ctx.lineJoin = "miter";

                  ctx.beginPath();

                  ctx.moveTo( 210, 10);

                  ctx.lineTo( 290, 10);

                  ctx.lineTo( 290, 90);

                  ctx.stroke();

                 

      } 

    } 

     </script> 

</head> 

<body onload="draw();"> 

     <canvas id="canvas" width="300" height="150"></canvas> 

</body> 

</html> 


결과


               linejoin.png

이 게시물을...