El método fillText() se usa para dibujar texto relleno en el lienzo. El color predeterminado del texto es negro.
Sintaxis:
context.fillText(text, x, y, maxWidth);
Parámetros:
- texto: este parámetro especifica el texto que se escribirá en el lienzo.
- x: Este parámetro especifica la coordenada x desde donde comenzar el texto.
- y: Este parámetro especifica la coordenada y desde donde terminar el texto.
- maxWidth: este parámetro especifica el ancho máximo permitido para el texto. es opcional
Ejemplo 1:
<!DOCTYPE html> <html> <head> <title> HTML canvas fillText() Method </title> </head> <body style="text-align:left;"> <h1>GeeksforGeeks</h1> <h2>HTML canvas fillText() Method</h2> <canvas id="GFG" width="500" height="200" style="border:2px solid"> </canvas> <script> var doc_id = document.getElementById("GFG"); var context = doc_id.getContext("2d"); context.font = "bold 30px solid"; context.fillText("GeeksforGeeks", 180, 100); // Create gradient var grad = context.createLinearGradient(0, 0, doc_id.width, 0); grad.addColorStop("0", "green"); grad.addColorStop("0.5", "white"); grad.addColorStop("1.0", "green"); // Fill with gradient context.fillStyle = grad; context.fillText("GeeksforGeeks", 180, 120); </script> </body> </html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método HTML canvas fillText() se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA