Wulin.com (www.vevb.com) Artikel Einführung: HTML Canvas vertikal ausgerichtete Text, wir können den Attributwert von textbaseline innerhalb des Canvas -Bereichs verwenden. TextBaSeline kann einen der folgenden Werte festlegen: oben, Hang, Mitte, Alphabetik, IdeaGraphic und Bottom. Sofern nicht anders angegeben, ist das textbaseline -Attribut für Buchstaben standardmäßig.
HTML Canvas vertikal ausgerichtete Text. Wir können den Eigenschaftswert von TextBaseline im Canvas -Bereich verwenden. TextBaSeline kann einen der folgenden Werte festlegen: oben, Hang, Mitte, Alphabetik, IdeaGraphic und Bottom. Sofern nicht anders angegeben, ist das textbaseline -Attribut für Buchstaben standardmäßig.
<! DocType html>
<html>
<kopf>
<title> html5_canvas_text_baseline </title>
<Styles>
Körper {Margin: 0px; Polsterung: 0px;}
#mycanvas {Grenze: 1PX Solid #9c9898; Rand: 0 Auto; Margin-Top: 200px; Rand-Links: 100px;}
</style>
<Script>
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 richtet den Text horizontal relativ zur Platzierung aus
context.textalign = center;
// textbaseline richtet den Text vertikal relativ zum Schriftstil aus
context.textbaseline = Middle;
context.fillStyle = blau;
context.FillText (Hallo Welt!, x, y);
};
</script>
</head>
<body>
<canvas id = mycanvas width = 578 Höhe = 200>
</canvas>
</body>
</html>