HTML | propiedad de estilo de trazo de lienzo

La propiedad canvas strokeStyle se utiliza para establecer o devolver el trazo de color, degradado o patrón utilizado en el dibujo.

Sintaxis:

context.strokeStyle=color|gradient|pattern;

El valor de la propiedad:

  • color: Se utiliza para establecer el color de relleno del dibujo. El valor predeterminado de la propiedad estilo de relleno del lienzo es negro.
  • degradado: se utiliza para configurar el objeto de degradado para rellenar el dibujo. El objeto degradado es lineal o radial.
  • patrón: Se utiliza para establecer el patrón para rellenar el dibujo.

Ejemplo 1: este ejemplo usa la propiedad canvas strokeStyle para establecer el color del trazo en verde.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas strokeStyle property
    </title>
</head>
  
<body>
    <canvas id="GFG" width="500" height="300"></canvas>
      
    <!-- Script to uses canvas strokeStyle property -->
    <script>
        var x = document.getElementById("GFG");
        var contex = x.getContext("2d");
          
        // Create rectangle
        contex.rect(50, 50, 350, 200);
          
        // Set stroke color
        contex.strokeStyle = "green";
          
        // Set stroke width
        contex.lineWidth = "10";
          
        contex.stroke();
    </script> 
</body>
  
</html>                    

Producción:

Ejemplo 2: este ejemplo utiliza la propiedad canvas strokeStyle para establecer el color del trazo mediante un degradado lineal.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML canvas strokeStyle property
    </title>
</head>
  
<body>
    <canvas id="GFG" width="500" height="300"></canvas>
      
    <!-- Script to uses canvas strokeStyle property -->    
    <script>
        var x = document.getElementById("GFG");
        var contex = x.getContext("2d");
          
        // Create linear gradient
        var gr = contex.createLinearGradient(0, 0, 350, 200);
          
        // Set color and position in a gradient object
        gr.addColorStop("0", "green");
        gr.addColorStop("0.7", "yellow");
        gr.addColorStop("1.0", "blue");
          
        // Set stroke style to gradient
        contex.strokeStyle = gr;
          
        // Set line width
        contex.lineWidth = 5;
          
        // Create rectangle
        contex.rect(50, 50, 350, 200);
          
        contex.stroke();
    </script> 
</body>
  
</html>                    

Producción:

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

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

Publicación traducida automáticamente

Artículo escrito por R_Raj 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 *