Wulin.com (www.vevb.com) Artikel PENDAHULUAN: Untuk mendapatkan pengukuran teks teks kanvas HTML5, kita dapat menggunakan metode pengukuranteks () konteks kanvas. Metode ini membutuhkan string teks dan mengembalikan font untuk teks yang disediakan berdasarkan objek pengukuran dan ditugaskan ke teks konteks saat ini.
Untuk mendapatkan metrik teks HTML5 Canvas, kita dapat menggunakan metode konteks kanvas dari pengukuran (). Metode ini membutuhkan string teks dan mengembalikan font untuk teks yang disediakan berdasarkan objek pengukuran dan ditugaskan ke teks konteks saat ini.
Saat ini, lebar teks adalah satu -satunya ukuran dengan metode pengukuran (). Sistem teks metrik tinggi saat ini tidak didukung.
<! Doctype html>
<Html>
<head>
<tyle>
tubuh {
margin: 0px;
padding: 50px;
}
#mycanvas {
Perbatasan: 1px Solid #9C9898;
}
</tyle>
<script>
window.onload = function () {
var canvas = document.getElementById (myCanvas);
var context = canvas.getContext (2D);
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = Hello World!;
Context.font = 30pt Calibri;
context.textAlign = center;
context.fillstyle = biru;
context.filltext (teks, x, y);
// Dapatkan metrik teks
var metrics = context.MeasureText (teks);
var width = metrics.width;
Context.font = 20pt Calibri;
context.textAlign = center;
context.fillstyle = #555;
context.fillText (( + lebar + px lebar), x, y + 40);
};
</script>
</head>
<body onmousedown = return false;>
<Canvas ID = myCanvas width = 578 tinggi = 200>
</ Canvas>
</body>
</html>