CanvasRenderingContext2D.lineCap


            html5.jpg



설명


    CANVAS 에 선의 끝 모양을 지정한다.


분류


    선 / 스타일


형태


    DOMSting CanvasRenderingContext2D.lineCap


적용 가능 값


    butt     : 아무런 효과가 없다

    round  : 선 폭의 1/2을 반지름으로 하는 반원이 선 양쪽 끝에 그려진다.

    square : 선 폭의 1/2 높이로 하는 사각형이 손 양쪽 끝에 그려진다.


기본값


    butt


예제


<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 = 1;

 

                  ctx.beginPath();

                  ctx.moveTo(10, 10);

                  ctx.lineTo(100,10);

                  ctx.stroke();

 

                  ctx.beginPath();

                  ctx.moveTo(10, 140);

                  ctx.lineTo(100,140);

                  ctx.stroke();

                 

                  ctx.lineWidth = 10;

                  ctx.strokeStyle = "red"; 

                 

                  ctx.lineCap = "butt";

                  ctx.beginPath();

                  ctx.moveTo(20, 10 );

                  ctx.lineTo(20, 140);

                  ctx.stroke();

                 

                  ctx.lineCap = "round";

                  ctx.beginPath();

                  ctx.moveTo(50, 10 );

                  ctx.lineTo(50, 140);

                  ctx.stroke();

 

                  ctx.lineCap = "square";

                  ctx.beginPath();

                  ctx.moveTo(80, 10 );

                  ctx.lineTo(80, 140);

                  ctx.stroke();

                 

      } 

    } 

     </script> 

</head> 

<body onload="draw();"> 

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

</body> 

</html> 


결과


              lineCap.png

이 게시물을...