目 录CONTENT

文章目录

五星红旗下的我们

Administrator
2022-02-23 / 0 评论 / 0 点赞 / 5594 阅读 / 7422 字

五星红旗下的我们

  • 案例名称:五星红旗下的我们
  • 案例人员:杨标
  • 案例平台:HTML+CSS+JavaScript
  • 完成时间:2022年2月16日

效果图

image20220216103951316.png

案例说明

本次案例主要使用到的就是canvas这个技术,canvas是HTML5里面的画布,通过这个技术我们可以在网页上面呈现丰富多彩的内容

案例需要一面五星红旗的图片,同时还需要另一个个人的照片(这里我使用的是自己的照片),如下所示

image20220216104105698.png
将自己的图片衬在五星红旗的下面,这样就完成了我们的效果图了

本次案例的案成有多种多样的方式,这里我列举常见的三种试

案例代码一

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

<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>red-flag</title>
    <style>
        #img1 {
            border: 1px solid black;
        }

        #c1 {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <img src="./img/01.png" id="img1" alt="">
    <canvas id="c1"></canvas>
</body>
<script>
    var img1 = document.querySelector("#img1");
    img1.onload = function() {
        /** @type{HTMLCanvasElement} */
        var c1 = document.querySelector("#c1");
        c1.width = img1.width;
        c1.height = img1.height;
        var ctx = c1.getContext("2d");
        var img2 = new Image();
        img2.src = "./img/mmexport1632908082978.jpg";
        img2.width = img1.width;
        img2.height = img1.height;
        ctx.drawImage(img1, 0, 0, img1.width, img1.height);
        for (var i = 0; i < img1.height; i++) {
            var imgData = ctx.getImageData(0, i, img1.width, 1);
            var alpha = 255;
            for (var j = 0; j < imgData.data.length; j += 4) {
                alpha--;
                if (alpha < 0) {
                    alpha = 0;
                }
                imgData.data[j + 3] = alpha;
            }
            ctx.putImageData(imgData, 0, i);
        }
        img2.onload = function() {
            ctx.globalCompositeOperation = "destination-over";
            ctx.drawImage(img2, 0, 0,img2.width,img2.height);
        }
    }
</script>

</html>

案例代码二

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

<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>red-flag</title>
    <style>
        #img1 {
            border: 1px solid black;
        }

        #c1 {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <img src="./img/01.png" id="img1" alt="">
    <canvas id="c1"></canvas>
</body>
<script>
    var img1 = document.querySelector("#img1");
    img1.onload = function() {
        /** @type{HTMLCanvasElement} */
        var c1 = document.querySelector("#c1");
        c1.width = img1.width;
        c1.height = img1.height;
        var ctx = c1.getContext("2d");
        var img2 = new Image();
        img2.src = "./img/mmexport1632908082978.jpg";
        img2.width = img1.width;
        img2.height = img1.height;
        ctx.drawImage(img1, 0, 0, img1.width, img1.height);
        var imgData = ctx.getImageData(0, 0, img1.width, img1.height);
        var alpha = 255;
        for (var i = 0; i < imgData.data.length; i += 4) {
            alpha--;
            imgData.data[i + 3] = alpha;
            if ((i + 4) % img1.width == 0) {
                alpha = 255;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        var base64Str = c1.toDataURL("image/png");
        var img_bak = new Image();
        img_bak.src = base64Str;
        img2.onload=function(){
            ctx.drawImage(img2,0,0,img2.width,img2.height);
            ctx.drawImage(img_bak,0,0,img_bak.width,img_bak.height);
        }
    }
</script>

</html>

案例代码三

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

<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>作业</title>
    <style>
        #c1 {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="c1"></canvas>
</body>
<script>
    /** @{HTMLImageElement} */
    var img1 = new Image();
    img1.src = "./img/01.png";
    var img2 = new Image();
    img2.src = "./img/mmexport1632908082978.jpg";
    img1.onload = function() {
        img2.onload = function() {
            /** @type{HTMLCanvasElement} */
            var c1 = document.querySelector("#c1");
            c1.width = img1.width;
            c1.height = img1.height;
            var ctx = c1.getContext("2d");
            // 图片等比的缩放
            var percent = img1.width / img2.width;
            img2.width = img2.width * percent;
            img2.height = img2.height* percent;
            ctx.drawImage(img1, 0, 0, img1.width, img1.height);

            ctx.globalCompositeOperation = "destination-over";
            var i = 0;
            var timerId = setInterval(function() {
                //由上下向的扫描数据,每次扫描一行(一像素)
                var imgData = ctx.getImageData(0, i, img1.width, 1);
                var alpha = 255;
                for (var j = 0; j < imgData.data.length; j += 4) {
                    // 改变alphp值
                    alpha -= 0.7;
                    if (alpha < 0) {
                        alpha = 0;
                    }

                    imgData.data[j + 3] = parseInt(alpha);
                }
                ctx.putImageData(imgData, 0, i);
                i++;
                if (i >= img1.height) {
                    clearInterval(timerId);
                }

                ctx.drawImage(img2, 0, 0, img2.width, img2.height);
            }, 20);


        }
    }
</script>

</html>

在当前的这个代码当中,我们使用了定时器,这样会产生一个动画的效果,效果图如下

GIF2022216104342.gif

0

评论区