HTML5 Canvas 'Teks Vertikal Alignment

Penulis：Eve Cole Waktu Pembaruan：2025-04-13 09:00:04

Wulin.com (www.vevb.com) Artikel PENDAHULUAN: HTML Canvas Teks yang selaras secara vertikal, kita dapat menggunakan nilai atribut TextBaseline dalam rentang Canvas. TextBaseline dapat menetapkan salah satu dari nilai -nilai berikut: Top, Hanging, Middle, Alphabetic, IdeGraphic, dan Bottom. Kecuali ditentukan lain, TextBaseline atribut default ke huruf.

HTML Canvas Teks yang selaras secara vertikal, kita dapat menggunakan nilai properti TextBaseline dalam kisaran kanvas. TextBaseline dapat menetapkan salah satu dari nilai -nilai berikut: Top, Hanging, Middle, Alphabetic, IdeGraphic, dan Bottom. Kecuali ditentukan lain, TextBaseline atribut default ke huruf.

context.textBaseline = [nilai];

<! Doctype html>

<Html>

<head>

<title> html5_canvas_text_baseline </iteme>

<tyle>

tubuh {margin: 0px; padding: 0px;}

#mycanvas {border: 1px solid #9c9898; margin: 0 otomatis; margin-top: 200px; margin-kiri: 100px;}

</tyle>

window.onload = function () {

var canvas = document.getElementById (myCanvas);

var context = canvas.getContext (2D);

var x = canvas.width / 2;

var y = canvas.height / 2;

Context.font = 30pt Calibri;

// TextAlign menyelaraskan teks secara horizontal relatif terhadap penempatan

context.textAlign = center;

// TextBaseline menyelaraskan teks secara vertikal relatif terhadap gaya font

Context.TextBaseline = tengah;

context.fillstyle = biru;

context.filltext (halo dunia!, x, y);

};

</script>

</head>

<body>

</ Canvas>

</body>

</html>