tutoriais mais recente desenvolvimento web
 

HTML canvas strokeStyle Propery

<Object Canvas

Exemplo

Desenhe um retângulo. Use uma cor de traço de vermelho:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
Tente você mesmo "

Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.

Propriedade
strokeStyle 4.0 9 3,6 4.0 10.1

Definição e Uso

Os strokeStyle conjuntos de propriedades ou retorna a cor, gradiente ou padrão usado para golpes.

Valor padrão: # 000000
sintaxe JavaScript: context .strokeStyle= color | gradient | pattern ;

Valores de propriedade

Valor Descrição Jogue
color Um valor de cor CSS que indica a cor do traço do desenho. O valor padrão é # 000000 Jogue "
gradient Um objecto gradiente ( linear ou radial ) utilizado para criar um traçado gradiente
pattern Um padrão objecto utilizado para criar um padrão de acidente vascular cerebral

Exemplos

mais Exemplos

Exemplo

Desenhe um retângulo. Usar um acidente vascular cerebral gradiente:

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);
Tente você mesmo "

Exemplo

Escreva o texto "Big smile!" , Com um traçado 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);
Tente você mesmo "

<Object Canvas