HTML 畫布 - miterLimit 屬性

上一個

下一個

HTML 畫布 Canvas 2D API 的 miterLimit 屬性可用於設定使用 lineJoin 屬性應用的斜接樣式的比率。

此屬性應用於開始路徑後並在繪製線條前應用，並且屬於 CanvasRenderingContext2D 介面。

可能的輸入值

它接受非零整數數值，指定在畫布元素內部繪製的斜接限制比率。預設值為“10.0”。

示例

以下示例在應用 HTML 畫布 miterLimit 屬性後在畫布元素上繪製簡單的線。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath()
      context.moveTo(30, 10);
      context.lineTo(100, 160);
      context.lineTo(170, 10);
      context.lineJoin = 'miter';
      context.miterLimit = 2;
      context.lineWidth = 20;
      context.stroke();
      context.closePath();
      context.beginPath();
      context.moveTo(200, 10);
      context.lineTo(270, 160);
      context.lineTo(340, 10);
      context.miterLimit = 25;
      context.lineJoin = 'miter';
      context.lineWidth = 20;
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

網頁上返回的上述程式碼輸出如下 −

示例

以下程式在使用線條繪製的畫布元素內部繪製的形狀矩形上實現 miterLimit 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="250" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.miterLimit = 20;
      context.lineJoin = 'miter';
      context.lineWidth = 10;
      context.moveTo(30, 30);
      context.lineTo(30, 130);
      context.lineTo(180, 130);
      context.lineTo(180, 30);
      context.lineTo(25, 30);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

網頁上返回的上述程式碼輸出如下 −

html_canvas_lines.htm

列印頁面

上一個

下一個