EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

lineCap property

Gets or sets the current line cap style.

HTML Canvas 2D Context, Section 6Internet Explorer 9

Syntax

JavaScript

p = object.lineCap

Property values

Type: string

butt

Default. A flat edge is put perpendicular to each end of the line with no cap added.

round

A semicircle or rounded end cap is added to each end of the line.

square

A square end cap is added to each end of the line.

Standards information

Remarks

The round and square styles for the lineCap property make the lines slightly longer. For round ends, the cap diameter equals the lineWidth value. The square style adds a rectangle with a width of 1/2 of lineWidth. Both the round and square styles add approximately 1/2 of the current lineWidth value to the end of a line. You should consider this addition if your graphics accuracy is critical.

Illustration of the arcTo example with tangent lines

Examples

The following code example draws lines with the three lineCap styles and adds guidelines to display the additional length that the lines add. See the example online.


<!DOCTYPE html> 
<html>
<head>
    <title>LineCap example</title>  
</head>
<body>
  <canvas id="MyCanvas" width="300" height="300">This browser or document mode doesn't support canvas</canvas> 

    <script>
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          // Draw some lines with different line caps.
          var ctx = canvas.getContext("2d");
          var lStart = 50;
          var lEnd = 200;
          var yStart = 50;
          ctx.beginPath();
          ctx.lineWidth = "25";
          // Set the line caps and draw the lines
          ctx.lineCap = "butt";
          ctx.moveTo(lStart, yStart);
          ctx.lineTo(lEnd, yStart);
          ctx.stroke();
          ctx.beginPath();
          ctx.lineCap = "round";
          ctx.moveTo(lStart, yStart + 75);
          ctx.lineTo(lEnd, yStart + 75);
          ctx.stroke();
          ctx.beginPath();
          ctx.lineCap = "square";
          ctx.moveTo(lStart, yStart + 150);
          ctx.lineTo(lEnd, yStart + 150);
          ctx.stroke();

          // Add visualizer guidelines.      
          var x = lStart + ((lEnd - lStart) / 2);
          var capSize = ctx.lineWidth / 2;
          ctx.beginPath();
          ctx.lineWidth = "1";

          // Line length guidelines.
          ctx.strokeStyle = "blue";
          ctx.moveTo(lStart, 10);
          ctx.lineTo(lStart, 200);
          ctx.moveTo(lEnd, 10);
          ctx.lineTo(lEnd, 200);
          ctx.stroke();

          // Total line length guidelines.
          ctx.beginPath();
          ctx.strokeStyle = "red";
          ctx.moveTo(lStart - capSize, yStart + 25);
          ctx.lineTo(lStart - capSize, 240);
          ctx.moveTo(lEnd + capSize, yStart + 25);
          ctx.lineTo(lEnd + capSize, 240);
          ctx.stroke();

          // Annotate each line.      
          addText("<- line length ->", x, 20, "blue");
          addText("butt lineCap", x, yStart, "white");
          addText("round lineCap", x, yStart + 75, "white");
          addText("square lineCap", x, yStart + 150, "white");
          addText("<- Total line length ->", x, yStart + 180, "red");
        }
        function addText(text, x, y, color) {
          ctx.save();
          ctx.font = "400 16px/2 Unknown Font, sans-serif";
          ctx.textBaseline = "middle";
          var tMetric = ctx.measureText(text);
          ctx.fillStyle = color;
          ctx.fillText(text, (x - tMetric.width / 2), y);
          ctx.restore();
        }
      
  </script>

</body>
</html>


See also

CanvasRenderingContext2D
lineWidth

 

 

표시:
© 2014 Microsoft