Latest web development tutorials

Metodo canvas HTML strokeText ()

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

Esempi

Utilizzare strokeText (), scrivere il testo tela "Ciao mondo!" E (con un gradiente) "Grande sorriso!":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

ctx.font="20px Georgia";
ctx.strokeText("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.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

Nota: Safari non supporta parametri maxwidth.


Definizione e utilizzo

Metodo strokeText () per disegnare il testo su una tela (nessun colore di riempimento). Il colore del testo predefinito è il nero.

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

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

Valore parametro

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


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