Latest web development tutorials

Metodo canvas HTML fillText ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Esempi

Utilizzare fillText (), scrivere il testo tela "Ciao mondo!" E "Big sorriso!":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);

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.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto fillText ().

Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.

Nota: Safari non supporta parametri maxwidth.


Definizione e utilizzo

Metodo fillText () per disegnare il testo riempire sulla tela. Il colore del testo predefinito è il nero.

Suggerimento: Usa carattere attributi per definire la dimensione del carattere e il carattere, e utilizzare fillStyle proprietà ad un altro colore / gradiente per il rendering del testo.

sintassi JavaScript: contesto .fillText (testo, x, y, maxwidth);

Valore parametro

参数 描述
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置(相对于画布)。
y 开始绘制文本的 y 坐标位置(相对于画布)。
maxWidth 可选。允许的最大文本宽度,以像素计。


HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento