English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manual de referencia de HTML

大全 de etiquetas de HTML

HTML canvas fillText() method

fillText() is a Canvas 2The D API is a method to fill text at (x, y) position on the canvas. If the fourth parameter of the option provides a maximum width, the text will be scaled to fit the maximum width.

Manual de referencia de canvas HTML

Online Example

Use fillText() to write text "Basic Tutorial Website!" and "oldtoolbag.com!":

Your browser does not support HTML5 canvas tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas fillText() method usage-Basic Tutorial(oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5 canvas tag.
</canvas
<script>
var c=document.getElementById("myCanvas");
2d
ctx.font="20px Georgia"
ctx.fillText("Basic Tutorial Website!",10,50);
ctx.font="30px Verdana"
// create a 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 a gradient
ctx.fillStyle=gradient;
ctx.fillText("w"3codebox.com!10,90);
</script>
</body>
</html>
test and see ‹/›

browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten fillText() Método.

Nota:Internet Explorer 8 y las versiones anteriores no admiten el elemento <canvas>.

Nota:Safari no admite el parámetro maxWidth.

Definición y uso

El método fillText() dibuja texto relleno en el lienzo. El color predeterminado del texto es negro (#000000).

Consejo:Utilice font Atributo para definir el tipo de letra y el tamaño, y usar fillStyle Atributo en otro color/Renderizar texto con una transición degradada.

Sintaxis de JavaScript:context.fillText(text,x,y,maxWidth);

Valor del parámetro

ParámetroDescripción
textTexto que se especifica para la salida en el lienzo.
xCoordenada x del punto de partida del texto de dibujo (relativa al lienzo).
yCoordenada y del punto de partida del texto de dibujo (relativa al lienzo).
maxWidthOpcional. Ancho máximo de texto permitido, en píxeles.
Manual de referencia de canvas HTML