tutorial pengembangan web terbaru
 

HTML canvas fillText() Method

<Canvas Object

Contoh

Menulis "Hello world!" dan "Big smile!" (with gradient) pada kanvas, menggunakan fillText() :

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Cobalah sendiri "

Dukungan Browser

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.

metode
fillText() 4.0 9.0 3.6 4.0 10.1

Definisi dan Penggunaan

The fillText() metode menarik teks diisi di kanvas. Warna default teks berwarna hitam.

Tip: Gunakan font yang properti untuk menentukan font dan ukuran font, dan menggunakan fillStyle properti untuk membuat teks dalam warna lain / gradien.

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

Nilai parameter

Parameter Deskripsi Mainkan
text Menentukan teks yang akan ditulis di kanvas Mainkan "
x Koordinat x di mana untuk memulai melukis teks (relatif terhadap kanvas) Mainkan "
y y koordinat di mana untuk memulai melukis teks (relatif terhadap kanvas) Mainkan "
maxWidth Pilihan. Maksimum yang diizinkan lebar teks, dalam piksel Mainkan "

<Canvas Object