Manual de Referencia HTML

大全 de etiquetas HTML

Atributo strokeStyle de stroke de HTML canvas

La propiedad strokeStyle del lienzo HTML se utiliza para establecer el color, degradado o patrón del trazo. El elemento <canvas> le permite dibujar gráficos en una página web utilizando JavaScript. Cada lienzo tiene dos elementos que describen la altura y anchura del lienzo, respectivamente, altura y anchura.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar un rectángulo, usando el color de trazo rojo:

Demostración en línea del uso del atributo strokeStyle de HTML canvas:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo strokeStyle de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" ancho="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Prueba y observa ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten la propiedad strokeStyle.

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

La propiedad strokeStyle establece o devuelve el color, degradado o patrón utilizado para el trazo.

valor predeterminado:	#000000
sintaxis de JavaScript:	contexto.strokeStyle=color\|gradient\|patrón;

valor del atributo

valor	descripción
color	que indica el color del trazo de dibujo valor de color CSS。El valor predeterminado es #000000。
gradient	objeto degradado utilizado para rellenar el dibujo (lineal o radial）。
patrón	usado para crear trazos de patrón patrón objeto.

Ejemplo en línea

Dibujar un rectángulo. Usar trazo degradado:

Demostración en línea del uso del atributo strokeStyle de HTML canvas:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo strokeStyle de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" ancho="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas.</canvas>
<script>
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");
//Relleno de gradiente
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Prueba y observa ‹/›

Ejemplo en línea

Escribir texto con un trazo degradado "Big smile!":

Demostración en línea del uso del atributo strokeStyle de HTML canvas:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso del atributo strokeStyle de HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" ancho="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta canvas
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.font="30px　Verdana";
//　Crear gradiente
var　gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　Relleno de gradiente
ctx.strokeStyle=gradient;
ctx.strokeText("Big　smile!",10,50);
</script>
</body>
</html>

Prueba y observa ‹/›

Manual de referencia de canvas HTML

HTML: <template> etiqueta