HTML Canvas - lineTo() 方法

Canvas API 的 HTML Canvas lineTo() 方法通常用於向當前路徑新增一條直線，該直線到作為輸入引數傳遞的點。

要檢視在 Canvas 元素上呈現的此線，我們必須對 canvas 上下文物件使用fill() 或stroke() 方法。

語法

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

CanvasRenderingContext2D.lineTo(x, y);

引數

以下是此方法的引數列表：

序號	引數及描述
1	x 線的終點的 x 座標值。
2	y 線的終點的 y 座標值。

返回值

它在 Canvas 元素內建立一條線，只有使用相應的方法填充或描邊後才能看到。

示例 1

以下示例使用 HTML Canvas lineTo() 方法在畫布上繪製一條到指定點的線。

<!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.moveTo(20, 20);
      context.lineTo(230, 80);
      context.stroke();
   </script>
</body>
</html>

輸出

給定程式碼生成的輸出顯示在網頁上，如下所示：

示例

以下示例使用lineTo() 方法繪製“K”字母。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="150" height="100" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.moveTo(40, 20);
      context.lineTo(40, 90);
      context.moveTo(100, 20);
      context.lineTo(40, 55);
      context.lineTo(100, 90);
      context.stroke();
   </script>
</body>
</html>

輸出

給定程式碼生成的輸出顯示在網頁上，如下所示：

示例

以下示例透過使用lineTo() 方法繪製線條，在畫布元素上繪製“tin”字。

<!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.strokeStyle = 'blue';
      context.moveTo(40, 20);
      context.lineTo(80, 20);
      context.moveTo(60, 20);
      context.lineTo(60, 90);
      context.moveTo(100, 20);
      context.lineTo(140, 20);
      context.moveTo(120, 20);
      context.lineTo(120, 90);
      context.moveTo(100, 90);
      context.lineTo(140, 90);
      context.moveTo(160, 90);
      context.lineTo(160, 20);
      context.lineTo(200, 90);
      context.lineTo(200, 20);
      context.stroke();
   </script>
</body>
</html>

輸出

給定程式碼生成的輸出顯示在網頁上，如下所示：

html_canvas_lines.htm

列印頁面