canvas笔记-文字渲染

最新推荐文章于 2024-08-18 04:43:55 发布

IT1995

最新推荐文章于 2024-08-18 04:43:55 发布

阅读量940

点赞数 50

分类专栏： Web相关技术 web前端文章标签： html web前端 canvas

本文链接：https://blog.csdn.net/qq78442761/article/details/106492185

版权

web前端同时被 2 个专栏收录

181 篇文章 6 订阅

订阅专栏

Web相关技术

160 篇文章 8 订阅

订阅专栏

字体以及填充文字

程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.font = "bold 40px Arial";
        context.fillStyle = "#058";
        context.fillText("中文ABC1234！@#￥%", 40, 100);
    }


</script>

</body>
</html>

其中：

context.font = "bold 40px Arial";
context.fillStyle = "#058";
context.fillText("中文ABC1234！@#￥%", 40, 100);

其中：font指定了加粗bold与字体大小为40px及Arial。

使用fillStyle指定了颜色为#058，使用fillText设置了文字内容，以及再40，100处进行画文字。

如果使用描边进行绘画

源码如下：

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.font = "bold 40px Arial";
        context.fillStyle = "#058";
        context.fillText("中文ABC1234！@#￥%", 40, 100);

        context.strokeText("中文ABC1234！@#￥%", 40, 200);
    }


</script>

程序运行截图如下：

再fillText与strokeText包含第四个参数，这个参数的意义是限制其宽度：

如下代码：

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.font = "bold 40px Arial";
        context.fillStyle = "#058";
        context.fillText("中文ABC1234！@#￥%", 40, 100);
        context.strokeText("中文ABC1234！@#￥%", 40, 200);

        context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
        context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);
    }


</script>

程序运行截图如下：

下面是使用线性梯度进行渲染下：

程序运行截图如下：

源码如下：

window.onload = function(){

    let canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 800;
    let context = canvas.getContext("2d");

    context.font = "bold 40px Arial";
    context.fillStyle = "#058";
    context.fillText("中文ABC1234！@#￥%", 40, 100);
    context.strokeText("中文ABC1234！@#￥%", 40, 200);

    context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
    context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);

    let linearGrad = context.createLinearGradient(0, 0, 800, 0);
    linearGrad.addColorStop(0.0, "red");
    linearGrad.addColorStop(0.1, "black");
    linearGrad.addColorStop(0.2, "green");
    linearGrad.addColorStop(0.3, "yellow");
    linearGrad.addColorStop(0.4, "orange");
    linearGrad.addColorStop(0.5, "purple");
    linearGrad.addColorStop(0.6, "teal");
    linearGrad.addColorStop(0.7, "pink");
    linearGrad.addColorStop(1.0, "brown");
    context.fillStyle = linearGrad;
    context.fillText("中文ABC1234！@#￥%", 40, 500);
}

下面是使用图片纹理的例子：

程序运行截图如下：

源码如下：

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.font = "bold 40px Arial";
        context.fillStyle = "#058";
        context.fillText("中文ABC1234！@#￥%", 40, 100);
        context.strokeText("中文ABC1234！@#￥%", 40, 200);

        context.fillText("中文ABC1234！@#￥%", 40, 300, 100);
        context.strokeText("中文ABC1234！@#￥%", 40, 400, 100);

        let linearGrad = context.createLinearGradient(0, 0, 800, 0);
        linearGrad.addColorStop(0.0, "red");
        linearGrad.addColorStop(0.1, "black");
        linearGrad.addColorStop(0.2, "green");
        linearGrad.addColorStop(0.3, "yellow");
        linearGrad.addColorStop(0.4, "orange");
        linearGrad.addColorStop(0.5, "purple");
        linearGrad.addColorStop(0.6, "teal");
        linearGrad.addColorStop(0.7, "pink");
        linearGrad.addColorStop(1.0, "brown");
        context.fillStyle = linearGrad;
        context.fillText("中文ABC1234！@#￥%", 40, 500);

        let bakgroundImage = new Image();
        bakgroundImage.src = "img/bg.jpg";
        bakgroundImage.onload = function(){

            let pattern = context.createPattern(bakgroundImage, "repeat");
            context.fillStyle = pattern;
            context.font = "bold 60px Arial";
            context.fillText("中文ABC1234！@#￥%", 40, 600);
        }
    }


</script>