canvas文字绘制（大小、粗体、倾斜、对齐、基线）

好奇的菜鸟

已于 2023-06-19 11:18:57 修改

阅读量3.1w

点赞数 18

分类专栏：前端 Canvas 文章标签： html

于 2022-08-09 22:37:37 首次发布

本文链接：https://blog.csdn.net/qq_29752857/article/details/126257149

版权

前端同时被 2 个专栏收录

76 篇文章

订阅专栏

Canvas

7 篇文章

订阅专栏

一、fillText()函数绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式
        ctx.font = "20px Georgia";
        //设置文字及其位置
        ctx.fillText("Hello World", 10, 50);
        ctx.font = "30px Verdana"
        //设置线性渐变色
        var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
        gradient.addColorStop("0", "magenta")
        gradient.addColorStop("0.5", "blue")
        gradient.addColorStop("1.0", "red")
        ctx.fillStyle = gradient;
        ctx.fillText("Big smile!", 10, 90)
    }
</script>

</html>

二、strokeText()函数绘制文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式
        ctx.font = "20px Georgia";
        //设置文字及其位置
        ctx.fillText("Hello World", 10, 50);
        ctx.font = "30px Verdana"
        //设置线性渐变色
        var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
        gradient.addColorStop("0", "magenta")
        gradient.addColorStop("0.5", "blue")
        gradient.addColorStop("1.0", "red")
        ctx.strokeStyle = gradient;
        ctx.strokeText("Big smile!", 10, 90)
    }
</script>

</html>

三、设置文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式，大小20px
        ctx.font = "20px Georgia";
        //设置文字及其位置
        ctx.fillText("Hello World", 10, 50);
        //设置填充文字样式，大小30px
        ctx.font = "30px Verdana"
        ctx.fillText("Hello World", 10, 90);
    }
</script>

</html>

四、设置文字字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式，字体Georgia
        ctx.font = "20px Georgia";
        //设置文字及其位置
        ctx.fillText("Hello World(Georgia)", 10, 50);
        //设置填充文字样式，大小20px
        ctx.font = "20px Verdana"
        ctx.fillText("Hello World(Verdana)", 10, 90);
        //设置填充文字样式，大小20px
        ctx.font = "20px Arial"
        ctx.fillText("Hello World(Arial)", 10, 110);
    }
</script>

</html>

五、设置文字粗体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式，粗体 normal
        ctx.font = "normal 20px Arial";
        //设置文字及其位置
        ctx.fillText("Hello World(normal)", 10, 50);
        //设置填充文字样式，粗体 bold
        ctx.font = "bold 20px Arial"
        ctx.fillText("Hello World(bold)", 10, 90);
        //设置填充文字样式，粗体 bolder
        ctx.font = "bolder 20px Arial"
        ctx.fillText("Hello World(bolder)", 10, 110);
        //设置填充文字样式，粗体 lighter
        ctx.font = "lighter 20px Arial"
        ctx.fillText("Hello World(lighter)", 10, 130);
        //设置填充文字样式，粗体 100
        ctx.font = "100 20px Arial"
        ctx.fillText("Hello World(100)", 10, 150);
        //设置填充文字样式，粗体 600
        ctx.font = "600 20px Arial"
        ctx.fillText("Hello World(600)", 10, 170);
        //设置填充文字样式，粗体 900
        ctx.font = "900 20px Arial"
        ctx.fillText("Hello World(900)", 10, 190);
    }
</script>

</html>

六、斜体设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //设置填充文字样式，font-weight normal
        ctx.font = "normal 20px Arial";
        //设置文字及其位置
        ctx.fillText("Hello World(normal)", 10, 50);
        //设置填充文字样式，font-style italic
        ctx.font = "italic 20px Arial"
        ctx.fillText("Hello World(italic)", 10, 90);
        //设置填充文字样式，font-style oblique
        ctx.font = "oblique 20px Arial"
        ctx.fillText("Hello World(oblique)", 10, 130);
    }
</script>

</html>

七、文字对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        //绘制一条基本线
        ctx.strokeStyle = 'red';
        ctx.moveTo(150, 20);
        ctx.lineTo(150, 170);
        ctx.stroke();

        //设置填充文字样式
        ctx.font = "20px Arial";
        //设置对方式
        ctx.textAlign = 'start'
        //设置文字及其位置
        ctx.fillText("textAlign='start'", 150, 60);
        //设置对方式
        ctx.textAlign = 'end'
        //设置文字及其位置
        ctx.fillText("textAlign='end'", 150, 80);
        //设置对方式
        ctx.textAlign = 'left'
        //设置文字及其位置
        ctx.fillText("textAlign='left'", 150, 100);
        //设置对方式
        ctx.textAlign = 'center'
        //设置文字及其位置
        ctx.fillText("textAlign='center'", 150, 120);
        //设置对方式
        ctx.textAlign = 'right'
        //设置文字及其位置
        ctx.fillText("textAlign='right'", 150, 140);
    }
</script>

</html>

八、文字基线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body onload="draw('myCanvas')">
<canvas id="myCanvas" width="200" height="500"></canvas>
</body>
<script>
    function draw(id) {
        var c = document.getElementById(id);
        //获取canvs上下文
        var ctx = c.getContext("2d");
        var param = [{
            //普通字母线
            baseLne: "alphabetic",
            y: 50
        }, {
            //方框底线
            baseLne: "bottom",
            y: 100
        }, {
            //悬挂基线
            baseLne: "hanging",
            y: 150
        }, {
            //表意基线
            baseLne: "ideographic",
            y: 200
        }, {
            //方框中线
            baseLne: "middle",
            y: 250
        }, {
            //方框顶端
            baseLne: "top",
            y: 300
        }]
        for (var i = 0; i < param.length; i++) {
            //设置文字基线
            ctx.textBaseline = param[i].baseLne;
            ctx.font = '30px Arial';
            ctx.fillText("Hello,world", 50, param[i].y);
            ctx.moveTo(0, param[i].y);
            ctx.lineTo(250, param[i].y);
            ctx.stroke();
        }
    }
</script>

</html>