Csnvas 多张图片叠加，局部变色-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas使用</title>
    <style>
        canvas{
            border: 1px solid black;
            margin-left: 400px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="400px" height="400px"></canvas>


    <script>
        // 获取画布
        var mycanvas = document.getElementById("mycanvas")
        // 获取山下文
        var ctx = mycanvas.getContext("2d")
        var overlayCtx= mycanvas.cloneNode().getContext("2d");
        var myImage = new Image();
        myImage.src = './img/base_product.png'; //背景图片  你自己本地的图片或者在线图片
        var myImage2 = new Image();
        myImage2.src = './img/logo1_fto1.png';
        var myImage3 = new Image(); // 上胸部
        myImage3.src = './img/shoulder_color.png';
        var img3 = new Image(); // 袖子
        img3.src = './img/left_sleeve_color.png';
        // myImage.crossOrigin = 'Anonymous'; // 解除跨域
        myImage.onload = () => { 
            ctx.drawImage(myImage, 0, 0, 400, 400); 
            ctx.globalCompositeOperation = 'hard-light';
            // 设置透明度
            ctx.globalAlpha = 0.75;
        }
        myImage3.onload = function () { 
            overlayCtx.globalCompositeOperation = 'hard-light';
            overlayCtx.clearRect(0, 0, 400, 400);
            overlayCtx.drawImage(myImage3, 0, 0, 400, 400);
            overlayCtx.globalCompositeOperation = 'source-atop';
            overlayCtx.fillStyle = '#e47127';
            overlayCtx.fillRect(0, 0, 400, 400);
            ctx.drawImage(overlayCtx.canvas, 0, 0, 400, 400 );
        };
        img3.onload = function () { 
            overlayCtx.globalCompositeOperation = 'hard-light';
            overlayCtx.clearRect(0, 0, 400, 400);
            overlayCtx.drawImage(img3, 0, 0, 400, 400);
            overlayCtx.globalCompositeOperation = 'source-atop';
            overlayCtx.fillStyle = '#7d2027';
            overlayCtx.fillRect(0, 0, 400, 400);
            ctx.drawImage(overlayCtx.canvas, 0, 0, 400, 400);
       };
        // 画logo
        myImage2.onload = () => { 
            // ctx.setTransform(1,0,0,1,0,0);
            // ctx.rotate(50 * Math.PI / 180);
            // ctx.globalCompositeOperation = 'source-over';
            // ctx.globalAlpha = 0.75;
            ctx.drawImage(myImage2, 217, 110, 56, 28); 
            // ctx.setTransform(1,0,0,1,0,0);
        }
    
       
        //   function createImage(url) {
        //     return new Promise((resolve, reject) => {
        //     const img = new Image();
        //     // img.crossOrigin = 'Anonymous'; // Allow for images hosted elsewhere.
        //     img.src = url;
        //     img.onload = () => resolve(img);
        //     img.onerror = () => reject();
        //   });
        // }
        //   this.createImage('./img/base_product.png')
        //   console.log(this.createImage('./img/base_product.png'));  
        
       
    </script>
</body>
</html>