HTML canvas fillText() Metode
Voorbeeld
Skryf "Hallo wêreld!" en "Groot glimlag!" (met gradiënt) op die doek, met behulp van fillText():
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);
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die metode ten volle ondersteun.
| Method | |||||
|---|---|---|---|---|---|
| fillText() | Yes | 9.0 | Yes | Yes | Yes |
Let wel: Die maxWidth-parameter word nie in Safari 5.1 en vroeër weergawes ondersteun nie.
Definisie en gebruik
Die fillText() metode teken gevulde teks op die doek. Die verstekkleur van die teks is swart.
Wenk: Gebruik die lettertipe- eienskap om lettertipe en lettergrootte te spesifiseer, en gebruik die fillStyle- eienskap om die teks in 'n ander kleur/gradiënt weer te gee.
| JavaScript-sintaksis: | konteks .fillText( teks,x,y,maxWidth ); |
|---|
Parameterwaardes
| Parameter | Description | Play it |
|---|---|---|
| text | Specifies the text that will be written on the canvas | |
| x | The x coordinate where to start painting the text (relative to the canvas) | |
| y | The y coordinate where to start painting the text (relative to the canvas) | |
| maxWidth | Optional. The maximum allowed width of the text, in pixels |
❮ HTML-doekverwysing