Canvas画文字、渐变文字以及调整文字位置

_enzo

已于 2022-08-28 12:44:17 修改

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas js

于 2021-07-03 10:03:39 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118436092

Canvas 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Canvas在JavaScript中绘制文字，包括创建渐变文字以及调整文字的位置，通过示例代码展示了具体实现步骤和最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.画文字

在这里插入图片描述

代码如下：

<style>
    canvas {
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        //设置字体大小样式
        ctx.font = '100px 宋体';
        //设置字体颜色
        ctx.fillStyle = 'gold';
        //文字内容和位置
        ctx.fillText("hello", 250, 250);

        //绘制空心文字
        ctx.strokeStyle = 'purple';
        ctx.strokeText('你好', 0, 250);

        ctx.fillStyle = 'pink';
        //当前区域最大宽度为300px
        ctx.fillText("hello canvas!!", 100, 100, 300);
    </script>
</body>

结果如下：
在这里插入图片描述

二.画渐变文字

在这里插入图片描述

代码如下：

<style>
    canvas {
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        //设置字体样式
        ctx.font = '100px 宋体';
        
        //设置线性渐变
        var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
        //从0到整个区域的一半由黄渐变到蓝
        //从中间到最后由蓝渐变到红
        gradient.addColorStop('0', 'yellow');
        gradient.addColorStop('0.5', 'blue');
        gradient.addColorStop('1.0', 'red');
        //应用渐变，空心文字
        ctx.strokeStyle = gradient;
        ctx.strokeText('Hello Canvas!!!', 0, 300, 500);
        //实心文字
        ctx.fillStyle = gradient;
        ctx.fillText('Hello World!!!', 0, 100, 500);
    </script>
</body>

结果如下：
在这里插入图片描述

三.调整文字位置

在这里插入图片描述
代码如下：

<style>
    canvas {
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');

        //画直线
        ctx.beginPath();
        ctx.moveTo(250, 0);
        ctx.lineTo(250, 500);
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.moveTo(0, 250);
        ctx.lineTo(500, 250);
        ctx.stroke();
        ctx.closePath();
        //设置字体样式
        ctx.font = '100px 宋体';
        //设置水平文字的位置
        //ctx.textAlign = 'end';  默认为start
        ctx.textAlign = 'center';
        //设置垂直文字的位置
        //ctx.textBaseline = 'top';
        ctx.textBaseline = 'middle';
        ctx.fillText("Hello", 250, 250);

    </script>
</body>