Lienzo HTML5: Líneas | TIEngranaje

El canvas El elemento es nuevo en HTML5. Puedes usar el canvas para dibujar líneas, formas, texto y más. Para dibujar una línea en el Lienzo HTML5, utilizaremos varios métodos. Los métodos más comunes utilizados en el dibujo de líneas son beginPath(), moveTo(), lineTo()y stroke().

El beginPath() El método es declarar que queremos dibujar una línea. El siguiente es el moveTo(), que se utiliza para colocar el punto de contexto. Entonces usamos el lineTo() para dibujar una línea recta desde el punto inicial hasta el nuevo punto de destino.

Finalmente, usamos el stroke() para aplicar un trazo a la línea y hacerla visible. El color de trazo predeterminado es negropero podemos diseñar el color de la línea (strokeStyle) así como otras propiedades como ancho (lineWidth) o gorra (lineCap).

Debes tener en cuenta que Internet Explorer 8 y versiones anterioresno apoya la <canvas> elemento, ni el context propiedades y/o métodos.

Sintaxis

context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.stroke();

Ejemplo

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #AAAAAA;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100, 50);
    context.lineTo(300, 150);
    context.stroke();
</script>

Estilo de línea: ancho, color y tapa

El lineWidth propiedad establece o devuelve el ancho de línea actual, y el lineCap La propiedad establece o devuelve el estilo de las tapas de los extremos de una línea. El strokeStyle La propiedad establece o devuelve el color, el degradado o los patrones.

context.lineWidth=number;
context.lineCap="butt|round|square";
context.strokeStyle=color|gradient|pattern;

Aquí hay un ejemplo de cómo aplicar un ancho, color y límite diferente a una línea. Debe tener en cuenta que el lineCap valores de round y square aumentar la longitud de la línea. El valor predeterminado es butt.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.moveTo(100, 50);
    context.lineTo(300, 150);
    context.lineWidth = 5;
    context.lineCap = "round";
    context.strokeStyle="#FFAA00";
    context.stroke();
</script>