1 canvas 画二维码

最新推荐文章于 2024-05-08 10:43:24 发布

Sukla

最新推荐文章于 2024-05-08 10:43:24 发布

阅读量2.3k

点赞数 1

分类专栏： Canvas绘图

本文链接：https://blog.csdn.net/Sukla/article/details/79619899

版权

Canvas绘图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1，将网址转换为二维码并用canvas画到页面

效果

代码

<!--Created by Sukla on 2018/3/19.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>canvas 实例</title>
    <meta charset="utf-8">
</head>
<body>

<script src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.qrcode.js"></script>
<script type="text/javascript" src="./js/qrcode.js"></script>
<h2>draw in canvas</h2>
<div id="Canvas"></div>
<script>
    jQuery('#Canvas').qrcode({
        text: "https://gui-sukla.github.io"
    });
    //
    var Canvas = $('canvas')[0];
    var CRC = Canvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        draw(this);
        drawImg()
    };
    img.src = './images/sukla.jpg';
    function draw(obj){
        CRC.drawImage(obj,100,100,50,50);
    }
    //
    function drawImg(){
        var dataUrl = $('canvas')[0].toDataURL('images/');
        var newImg = '<h2>draw canvas Img </h2>';
        newImg += '<img src="' + dataUrl + '">';
        $('body').append(newImg);
    }
</script>
</body>
</html>
</html>