El método canvas moveTo() se usa para mover la ruta al punto especificado en el lienzo, sin crear una línea. Después de llamar al método moveTo(), podemos usar el método stroke() para dibujar la ruta en el lienzo.
Sintaxis:
context.moveTo( x, y );
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- x: este parámetro especifica la coordenada del eje x (horizontal) del punto.
- y: este parámetro especifica la coordenada del eje y (vertical) del punto.
Programa 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas moveTo() Method
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>HTML canvas moveTo() Method</h2>
<canvas id="GFG" width="500" height="300" >
</canvas>
<script>
var id_cont = document.getElementById("GFG");
var context = id_cont.getContext("2d");
context.moveTo(50, 50);
context.lineTo(450, 50);
context.strokeStyle="green";
context.stroke();
</script>
</body>
</html>
Producción:
Programa 2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas moveTo() Method
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>HTML canvas moveTo() Method</h2>
<canvas id="GFG" width="500" height="300" >
</canvas>
<script>
var id_cont = document.getElementById("GFG");
var context = id_cont.getContext("2d");
// Begin the second sub-path
context.moveTo(130, 80);
context.lineTo(350, 80);
// Begin the second sub-path
context.moveTo(130, 30);
context.lineTo(350, 30);
context.strokeStyle="green";
context.stroke();
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método HTML canvas moveTo() se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA