#js 部分代码

var canvas = document.getElementById("canvas"),
/*获取画布的高度*/
h = canvas.height,
/*获取画布的宽度*/
w = canvas.width,
context = canvas.getContext("2d");
// 设置字体
context.font = "40px bold PingFang-SC-Bold";
// 设置颜色
context.fillStyle = "#333";
// 设置水平对齐方式
context.textAlign = "center";
// 设置垂直对齐方式
context.textBaseline = "middle";
// 绘制文字（参数：要写的字，x坐标，y坐标）
context.fillText("canvas", w / 2, h / 2);

#测试页面的代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>canvas 文字垂直居中</title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<style>

</style>
<body onload="onload()">
<div style="border: #333333 solid  1px;height:150px;width:300px" >
<canvas id="canvas"></canvas>
</div>
</body>
<script>
function onload() {
var canvas = document.getElementById("canvas"),
/*获取画布的高度*/
h = canvas.height,
/*获取画布的宽度*/
w = canvas.width,
context = canvas.getContext("2d");
// 设置字体
context.font = "40px bold PingFang-SC-Bold";
// 设置颜色
context.fillStyle = "#333";
// 设置水平对齐方式
context.textAlign = "center";
// 设置垂直对齐方式
context.textBaseline = "middle";
// 绘制文字（参数：要写的字，x坐标，y坐标）
context.fillText("canvas", w / 2, h / 2);
    }
</script>
</html>

 ​

canvas 文字垂直居中_2d