①准备国企图片
guoqi.png

②准备图像图片
head.jpg

③下载源码 放入同一个目录

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 100%;
        }

        #myCanvas {
            display: block;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    </br>
    <div class="wrap">
        <canvas id="myCanvas" width="1024" height="742"></canvas>

    </div>

</body>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

        var img1 = new Image();
        var img2 = new Image();

        img1.src = 'head.jpg';
        img2.src = 'guoqi.png';

        img1.onload = drawImage;
        img2.onload = drawImage;
        function drawImage() {
            if (img1.complete && img2.complete) {
                ctx.drawImage(img1, 0, 0, 200, 200);
                ctx.globalCompositeOperation = "source-atop";
                ctx.drawImage(img2, 125, 120, 80, 80);

            }
        }
 
</script>

</html>

标签: none