Jajarkan teksJajar secara mendatar
Kod JavaScriptSalin kandungan ke papan keratan
-
context.textAlign="tengah|akhir|kiri|kanan|mula";
Nilai dan makna setiap satu adalah seperti berikut.
Mari kita gunakan contoh untuk merasakannya secara intuitif.
Kod JavaScriptSalin kandungan ke papan keratan
-
-
"zh">
-
-
"UTF-8">
-
textAlign
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
-
-
window.onload = fungsi(){
-
var kanvas = document.getElementById("kanvas");
-
canvas.width = 800;
-
canvas.height = 600;
-
var context = canvas.getContext("2d");
-
context.fillStyle = "#FFF";
-
context.fillRect(0,0,800,600);
-
-
-
context.strokeStyle="biru";
-
context.moveTo(400,100);
-
context.lineTo(400,500);
-
context.stroke();
-
-
-
context.fillStyle = "#000";
-
context.font="50px Arial";
-
-
-
context.textAlign="mula";
-
context.fillText("textAlign=start", 400, 120);
-
context.textAlign="end";
-
context.fillText("textAlign=end", 400, 200);
-
context.textAlign="kiri";
-
context.fillText("textAlign=left", 400, 280);
-
context.textAlign="center";
-
context.fillText("textAlign=center", 400, 360);
-
context.textAlign="kanan";
-
context.fillText("textAlign=right", 400, 480);
-
};
-
-
-
Hasil jalankan:
Jajarkan teksBaseline secara menegak
Kod JavaScriptSalin kandungan ke papan keratan
-
context.textBaseline="abjad|atas|gantung|tengah|ideografik|bawah"
Nilai dan makna setiap satu adalah seperti berikut.
值 |
描述 |
alphabetic |
默认。文本基线是普通的字母基线。 |
top |
文本基线是em方框的顶端。 |
hanging |
文本基线是悬挂基线。 |
middle |
文本基线是em方框的正中。 |
ideographic |
文本基线是表意基线。 |
bottom |
文本基线是em方框的底端。 |
Pertama, mari kita lihat kedudukan yang diwakili oleh setiap garis dasar melalui gambar.
Mari kita gunakan contoh untuk merasakannya secara intuitif.
Kod JavaScriptSalin kandungan ke papan keratan
-
-
"zh">
-
-
"UTF-8">
-
textBaseline
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
-
window.onload = -
fungsi(){
-
var kanvas = document.getElementById("kanvas");
kanvas.lebar = 800;
kanvas.tinggi = 600;
-
var- konteks = canvas.getContext(
"2d"-
);
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
-
//Lukis garis biru pada kedudukan y=300
-
context.strokeStyle=- "biru"
;
-
context.moveTo(0,300);
context.stroke();
-
context.fillStyle =
"#00AAAA"- ;
context.font=- "20px Arial"
;
-
-
//Letakkan setiap perkataan pada y=300 dengan nilai teksBaseline yang berbeza -
context.textBaseline=
"atas"-
;
context.fillText(
"Atas"-
,150,300
-
context.textBaseline=;
-
context.fillText("Bawah",250,300
-
context.textBaseline="tengah";
-
context.fillText("Tengah",350,300
-
context.textBaseline="abjad";
-
context.fillText("Abjad",450,300
-
context.textBaseline="tergantung";
-
context.fillText("Tergantung",550,300
-
};
-
Hasil jalankan: