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

打印页面