HTML canvas lineTo() 方法

HTML5 Canvas Referenzhandbuch

定义和用法

lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

实例

例子 1

开始一条路径，移动到位置 0,0。创建到达位置 300,150 的一条线：

Ihr Browser unterstützt das HTML5 canvas Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();

Versuchen Sie es selbst

提示：页面底部提供更多示例。

语法

context.lineTo(x,y);

参数值

参数 描述
x 路径目标位置的 x 坐标。
y 路径目标位置的 y 坐标。

更多示例

Beispiel 2

Zeichnen Sie einen Pfad, der das Alphabet L darstellt:

Ihr Browser unterstützt das HTML5 canvas Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.stroke();

Versuchen Sie es selbst

Browserunterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Version des Browsers, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch