CanvasRenderingContext2D.miterLimit


              html5.jpg



설명


    CANVAS 에 lineJoin 의 속성이 "miter" 지정되었을 경우 연결선 돌출 부위의 절단 범위를 지정한다.


분류


    선 / 스타일


형태


    float CanvasRenderingContext2D.miterLimit


기본값


    10


예제


<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, 20);

                  ctx.lineTo(200,20);

                  ctx.stroke();

 

                  ctx.beginPath();

                  ctx.moveTo(10, 100);

                  ctx.lineTo(200,100);

                  ctx.stroke();

                 

                  ctx.strokeStyle = "red"; 

                  ctx.lineWidth = 10;

                  ctx.lineJoin = "miter";

                  ctx.miterLimit = 10;

                 

                  ctx.beginPath();

                  ctx.moveTo(  10 ,  20);

                  ctx.lineTo(  20 , 100);

                  ctx.lineTo(  40 ,  20);

                  ctx.lineTo(  60 , 100);

                  ctx.lineTo(  80 ,  20);

                  ctx.lineTo( 100 , 100);

                  ctx.stroke();

 

                  ctx.strokeStyle = "blue"; 

                  ctx.lineWidth = 10;

                  ctx.lineJoin = "miter";

                  ctx.miterLimit = 1;

                 

                  ctx.beginPath();

                  ctx.moveTo( 110 ,  20);

                  ctx.lineTo( 120 , 100);

                  ctx.lineTo( 140 ,  20);

                  ctx.lineTo( 160 , 100);

                  ctx.lineTo( 180 ,  20);

                  ctx.lineTo( 200 , 100);

                  ctx.stroke();

                 

      } 

    } 

     </script> 

</head> 

<body onload="draw();"> 

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

</body> 

</html> 


결과


      miterLimit.png

이 게시물을...