tutorial pengembangan web terbaru
 

HTML canvas textBaseline Propery

<HTML Canvas Referensi

Contoh

Menarik garis merah di y=100 , kemudian menempatkan setiap kata di y=100 dengan nilai textBaseline yang berbeda:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
Cobalah sendiri "

Dukungan Browser

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

Milik
textBaseline iya nih 9.0 iya nih iya nih iya nih

Catatan: Properti textBaseline bekerja secara berbeda di browser yang berbeda, terutama ketika menggunakan "hanging" atau "ideographic" .


Definisi dan Penggunaan

The textBaseline set properti atau mengembalikan dasar teks saat digunakan ketika menggambar teks.

Ilustrasi di bawah ini menunjukkan berbagai baseline didukung oleh textBaseline atribut:

textBaseline ilustrasi

Catatan: fillText() dan strokeText() metode akan menggunakan nilai textBaseline yang ditentukan ketika posisi teks pada kanvas.

nilai default: alfabetis
sintaks JavaScript: context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

Nilai properti

Nilai Deskripsi Mainkan
alphabetic Default. Teks dasar adalah dasar abjad yang normal Mainkan "
top Teks dasar adalah atas em persegi Mainkan "
hanging Teks dasar adalah dasar menggantung Mainkan "
middle Teks dasar adalah tengah em persegi Mainkan "
ideographic Teks dasar adalah dasar ideografik Mainkan "
bottom Teks dasar adalah bagian bawah kotak bounding Mainkan "

<HTML Canvas Referensi