请老师检查，谢谢

来源：6-2 编程练习

qq_慕移动3101913

2020-03-02 15:18:48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas字体</title>
    <style>
        canvas{background-color:lightblue;}
    </style>
</head>
<body>
    <canvas id="canvas" width="800px" height="800px">您的浏览器不支持canvas
    </canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext('2d');
        //创建文字
        var str = '前端路径课程';

        //设置文本样式，加粗 大小 字体
        context.font = 'bold 30px 微软雅黑';
        //字体颜色
        context.fillStyle= "blue";
        //水平设置，居中
        context.textAlign = 'center';
        //垂直设置，居中
        context.textBaseline = 'middle';
        //填充字体；只有填充或描边，字体才会显示在画布上
        context.fillText(str,400,400)

        //获取文字宽度
        var width = context.measureText(str).width; 
        console.log(width);
         //创建文字
        var str2 = '字体的width是：' + width + 'px';
        //填充字体
        context.fillText(str2,400,500)
    </script>
</body>
</html>

写回答

1回答