canvas教程10-绘制文本_ctx.filltext字体大小-CSDN博客

本文链接：https://blog.csdn.net/William_fang/article/details/119277902

文章目录

一.绘制文本
二.源码
三.效果图
篇章

一.绘制文本

font属性：可以设置字体的大小和字体名称。

fillText方法的作用：填充文字。

ctx.fillText("我是微软雅黑",100,100);

第一个参数：填充的文字内容。

第二个参数：代表x的值。

第三个参数：代表y的值。

所以，第二、三个参数的作用：设置文字的坐标位置(x,y)。

textAlign属性的作用：文字的对齐方式。

ctx.textAlign = "left";

属性值讲解：

left：文本左对齐。

right：文本右对齐。

center：文本居中对齐。

start(默认值):文本从指定位置开始。

end：文本才指定位置结束。

二.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制文本</title>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    //写文字
    ctx.font = "30px 微软雅黑";
    ctx.textAlign = "left";
    ctx.fillText("我是微软雅黑",100,100); // (100,100)是绘制文字的位置
</script>