Los últimos tutoriales de desarrollo web
 

HTML canvas strokeStyle Propery

<Objeto Canvas

Ejemplo

Dibujar un rectángulo. Utilice un color de trazo de color rojo:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Inténtalo tú mismo "

Soporte del navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Propiedad
strokeStyle 4.0 9.0 3.6 4.0 10.1

Definición y Uso

Los conjuntos de propiedades strokeStyle o devuelve el color, degradado o patrón usado para los accidentes cerebrovasculares.

Valor por defecto: # 000000
la sintaxis de JavaScript: context .strokeStyle= color | gradient | pattern ;

Valores de propiedad

Valor Descripción Juegalo
color Un valor de color CSS que indica el color del trazo del dibujo. El valor por defecto es # 000000 Juegalo "
gradient Un objeto gradiente ( lineal o radial ) que se utiliza para crear un trazo degradado
pattern Un modelo de objeto usado para crear un patrón de accidente cerebrovascular

Ejemplos

Más ejemplos

Ejemplo

Dibujar un rectángulo. Use un trazo degradado:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");

// Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
Inténtalo tú mismo "

Ejemplo

Escribir el texto "Big smile!" , Con una carrera de gradiente:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
Inténtalo tú mismo "

<Objeto Canvas