html-在二维码的任意位置添加文字

直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在二维码的任意位置添加文字</title>
    <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style>
        body{ background-color: ivory; }
        #canvas{border:1px solid red;}
    </style>

    <script>
        window.onload = function(){
             var canvas = document.getElementById("myCanvas");
             var context = canvas.getContext("2d");
             var imageObj = new Image();
             imageObj.onload = function(){
                 context.drawImage(imageObj, 100, 100);
                 context.font = "40pt Calibri";
                 context.fillText("My TEXT!", 20, 20);
             };
             imageObj.src = "http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg";
        };
    </script>

</head>

<body>
    <canvas id="myCanvas" ></canvas>
</body>
</html>

好了，记录到这里，持续更新中。

记录问题也是一种修行。

书山有路勤为径，学海无涯苦作舟。

欢迎关注微信公众号：【乐知付加密平台】，您的网络资源可变现

一起学习，一起进步。