HTML | línea de lienzoÚnete a la propiedad

La propiedad lineJoin del lienzo HTML se usa para establecer o devolver el tipo de esquina creada, cuando dos líneas se encuentran, usando la propiedad lineJoin. El tipo de unión puede tener uno de tres estilos: bisel, redondo o inglete. Sin embargo, el estilo de unión generalmente tiene un estilo de inglete.

Sintaxis:

context.lineJoin = "bevel|round|miter";

Valores de propiedad:

  • mitre: Es el estilo por defecto. Este valor se utiliza para diseñar una esquina afilada.
  • bisel: este diseño se utiliza para crear esquinas biseladas.
  • redondo: este diseño se utiliza para crear esquinas redondeadas.

Ejemplo 1: Este ejemplo ilustra la propiedad mitre linejoin.

<!DOCTYPE html>
<html>
  
<head> 
    <title> 
        HTML canvas lineJoin property
    </title> 
</head> 
  
<body style="text-align:center;">
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h2> 
        HTML canvas lineJoin property
    </h2> 
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "miter";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Producción:

Ejemplo 2: Este ejemplo ilustra la propiedad de unión de línea de bisel.

<!DOCTYPE html>
<html>
  
<head> 
    <title> 
        HTML canvas lineJoin property
    </title> 
</head> 
  
<body style="text-align:center;">
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h2> 
        HTML canvas lineJoin property
    </h2> 
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "bevel";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Producción:

Ejemplo 3: Este ejemplo ilustra la propiedad de unión de línea redonda.

<!DOCTYPE html>
<html>
  
<head> 
    <title> 
        HTML canvas lineJoin property
    </title> 
</head> 
  
<body style="text-align:center;">
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h2> 
        HTML canvas lineJoin property
    </h2> 
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "round";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad HTML canvas lineJoin se enumeran a continuación:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *