canvas 文字垂直居中

最新推荐文章于 2024-05-29 09:40:33 发布

Lengff12138

最新推荐文章于 2024-05-29 09:40:33 发布

阅读量4.8k

点赞数 3

本文链接：https://blog.csdn.net/qq_31878883/article/details/86741835

版权

#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>

#效果图点我查看效果

Lengff12138

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas 文字垂直居中

#js 部分代码var canvas = document.getElementById("canvas"), /*获取画布的高度*/ h = canvas.height, /*获取画布的宽度*/ w = canvas.width, context = canvas.get...
复制链接

扫一扫