HTML | Propiedad de ancho de línea de lienzo

La propiedad lineWidth del lienzo HTML se utiliza para establecer o devolver el ancho de la línea (grosor de la línea). El ancho de la línea se establece en términos de píxeles. El valor predeterminado de esta propiedad es 1.

Sintaxis:

context.lineWidth = number;

Valores de propiedad:

  • número: el valor de esta propiedad indica el número que especifica el ancho de línea en términos de píxeles. Esta propiedad ignora los valores cero , negativo , infinito y NaN .

Ejemplo 1:

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

Producción:

Programa 2:

<!DOCTYPE html>
<html>
  
<head> 
    <title> 
        HTML canvas lineWidth Property
    </title> 
</head> 
  
<body style = "text-align:center;">
      
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h2> 
        HTML canvas lineWidth() Property 
    </h2> 
  
    <canvas id="canvas" width="350" height="380"></canvas>
  
    <script>
        var canv = document.getElementById("canvas");
        var context = canv.getContext("2d");
        context.beginPath();
        context.lineWidth = 10;
        context.strokeStyle ="green";
        context.strokeRect(110, 40, 120, 100);
    </script>
</body>
  
</html>                    

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad HTML canvas lineWidth 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 *