HTML-canvas fillText() Methode
Voorbeeld
Schrijf "Hallo wereld!" en "Grote glimlach!" (met verloop) op het canvas, met 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);
Browserondersteuning
De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.
| Method | |||||
|---|---|---|---|---|---|
| fillText() | Yes | 9.0 | Yes | Yes | Yes |
Opmerking: de parameter maxWidth wordt niet ondersteund in Safari 5.1 en eerdere versies.
Definitie en gebruik
De methode fillText() tekent gevulde tekst op het canvas. De standaardkleur van de tekst is zwart.
Tip: gebruik de eigenschap font om het lettertype en de tekengrootte op te geven en gebruik de eigenschap fillStyle om de tekst in een andere kleur/verloop weer te geven.
| JavaScript-syntaxis: | context .fillText( tekst,x,y,maxWidth ); |
|---|
Parameterwaarden
| 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 Canvas-referentie