HTML Canvas - getLineDash() 方法

Canvas API 的 HTML Canvas getLineDash() 方法來自 CanvasRenderingContext2D 介面，當上下文物件呼叫它時，會返回當前應用的線段虛線樣式。

語法

以下是 HTML Canvas getLineDash() 方法的語法：

CanvasRenderingContext2D.getLineDash();

引數

這只是一個返回方法。因此，它不接受任何引數。

返回值

返回一個數組，包含繪製線段和間隙的距離。

示例 1

下面的示例在應用線段虛線方法後繪製畫布元素中的一條線，並在每次 HTML Canvas getLineDash() 方法載入網頁時，在網頁的視窗警告中顯示使用的變數。

<!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="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.setLineDash([5, 10]);
      window.alert(context.getLineDash());
      context.beginPath();
      context.moveTo(10, 50);
      context.lineTo(200, 50);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

在視窗警告中返回的輸出為：

示例 2

下面的示例繪製兩條線，並使用 setLineDash() 方法為它們應用線段虛線，然後使用 getLineDash() 方法透過視窗警告返回它們的陣列輸入。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.setLineDash([5, 10, 15]);
      window.alert(context.getLineDash());
      context.beginPath();
      context.moveTo(40, 50);
      context.lineTo(140, 100);
      context.lineTo(40, 150);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出為：

在視窗警告中返回的輸出為：

html_canvas_lines.htm

列印頁面