proprietà tela fillStyle HTML
HTML Manuale di tela di riferimento
Esempi
Riempito con rettangolo rosso definito:
JavaScript:
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
Prova »
Supporto per il browser
Internet Explorer 9, Firefox, Opera, Chrome e Safari supporto proprietà FillStyle.
Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.
Definizione e utilizzo
insiemi di proprietà FillStyle o restituisce il colore, una sfumatura o un modello utilizzato per riempire il dipinto.
| predefinito: | # 000000 |
|---|---|
| sintassi JavaScript: | contesto .fillStyle = colore | pendenza | modello; |
Proprietà Valore
| 值 | 描述 |
|---|---|
| color | 指示绘图填充色的 CSS 颜色值 。默认值是 #000000。 |
| gradient | 用于填充绘图的渐变对象（ 线性 或 放射性 ）。 |
| pattern | 用于填充绘图的 pattern 对象。 |
Altri esempi
Esempi
La definizione del gradiente dall'alto verso il basso, come stile di riempimento del rettangolo:
JavaScript:
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Prova »
Esempi
La definizione del gradiente da sinistra a destra, come stile di riempimento del rettangolo:
JavaScript:
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Prova »
Esempi
Definizione dal nero al rosso al bianco gradiente, uno stile di riempimento di rettangolo:
JavaScript:
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Prova »
Immagini utilizzate:
Esempi
Utilizzare un'immagine per riempire i disegni:
JavaScript:
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Prova »
HTML Manuale di tela di riferimento