Csnvas 多张图片叠加，局部变色

最新推荐文章于 2023-11-15 08:24:09 发布

xumengxia—xu

最新推荐文章于 2023-11-15 08:24:09 发布

阅读量196

点赞数

分类专栏： Canvas 文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/qq_56514785/article/details/124171743

版权

Canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

xumengxia—xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Csnvas 多张图片叠加，局部变色

<!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>ca.
复制链接

扫一扫

专栏目录