当前位置：网站首页>canvas 文字垂直居中

canvas 文字垂直居中

2022-08-09 08:37:00 【Lengff12138】

#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]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_31878883/article/details/86741835

当前位置：网站首页>canvas 文字垂直居中

canvas 文字垂直居中

边栏推荐

猜你喜欢

随机推荐