Manual de referência HTML

大全 de etiquetas HTML

Atributo strokeStyle do canvas HTML

A propriedade strokeStyle do HTML canvas é usada para definir a cor, gradiente ou padrão do traço. O elemento <canvas> permite que você desenhe gráficos na página da web usando JavaScript. Cada canvas tem dois elementos que descrevem a altura e largura do canvas, respectivamente, altura e largura.

Manual de referência do canvas do HTML

Exemplo online

Desenhe um retângulo, usando a cor do traço vermelha:

Demonstração online do uso do atributo strokeStyle do HTML canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do atributo strokeStyle do HTML canvas (Tutorial básico do site oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" largura="300" altura="15" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta 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>

Testar e ver ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam a propriedade strokeStyle.

Nota:Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.

Definição e uso

A propriedade strokeStyle define ou retorna a cor, gradiente ou padrão usados para o traço.

valor padrão:	#000000
Sintaxe JavaScript:	contexto.strokeStyle=color\|gradient\|padrão;

valor do atributo

valor	descrição
color	indicando a cor do traço de desenho valor de cor CSS。O valor padrão é #000000。
gradient	usado para preencher desenhos de gradiente (linear ou radial)。
padrão	usado para criar traços de padrão ( padrão objeto.

Exemplo online

Desenhe um retângulo. Use traço degradê:

Demonstração online do uso do atributo strokeStyle do HTML canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do atributo strokeStyle do HTML canvas (Tutorial básico do site oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" largura="300" altura="15" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta 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");
//Preenchimento de gradiente
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Testar e ver ‹/›

Exemplo online

Escreva o texto "Big smile!" com um traço degradê:

Demonstração online do uso do atributo strokeStyle do HTML canvas:

Exemplo

<!DOCTYPE html>
<html>
<head>
<title>Uso do atributo strokeStyle do HTML canvas (Tutorial básico do site oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" largura="300" altura="15" estilo="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　Tag canvas
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
//　Criar gradiente
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　Preenchimento de gradiente
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
</script>
</body>
</html>

Testar e ver ‹/›

Manual de referência do canvas do HTML

HTML: <template> tag