HTML5 Canvas的文本垂直对齐

作者：Eve Cole 更新时间：2025-04-13 09:00:04

武林网(www.vevb.com)文章简介：HTML画布垂直对齐的文本，我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一：top, hanging, middle, alphabetic, ideographic, and bottom。除非另有规定，textBaseline属性默认为字母。

HTML画布垂直对齐的文本，我们可以使用的textBaseline在画布范围内的属性值。textBaseline可以设置以下值之一：top, hanging, middle, alphabetic, ideographic, and bottom。除非另有规定，textBaseline属性默认为字母。

context.textBaseline=[value];

<!DOCTYPE HTML>

<html>

<head>

<title>html5_canvas_text_baseline</title>

<style>

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

#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}

</style>

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 aligns text horizontally relative to placement

context.textAlign = center;

// textBaseline aligns text vertically relative to font style

context.textBaseline = middle;

context.fillStyle = blue;

context.fillText(Hello World!, x, y);

};

</script>

</head>

<body>

</canvas>

</body>

</html>