canvas实现⽂字⽔平垂直居中
text align centercanvas实现⽂字⽔平垂直居中
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>canvas实现⽂字⽔平垂直居中</title>
</head>
<body>
<canvas id="myCanvas"width="500"height="300">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = ElementById("myCanvas");
var ctx = c.getContext("2d");
const w =200,
h =200;
ctx.fillStyle ="#3458a4";
ctx.fillRect(0,0, w, h);
ctx.fillStyle ="rgba(255,255,255)";
ctx.font ="50px 微软雅⿊";
ctx.fillText('test', w /2, h /
2);// 需要将fillText的第⼆个参数，也就是⽂字在x轴的位置，设置为宽度的⼀半；需要将fillText的第三个参数，也就是⽂字在y轴的位置，设置为⾼度的⼀半。
</script>
</body>
</html>
效果图
结论：
1.设置textAlign属性为’center’
2.设置textBaseline属性为’middle’
3.调⽤fillText⽅法时，第⼆个参数【开始绘制⽂本的 x 坐标位置（相对于画布）】的值为⽂字所需居中的宽度的⼀半，第三个参数【开始绘制⽂本的 y 坐标位置（相对于画布）】是的值为⽂字所需居中的⾼度的⼀半

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。