码云前端开发 2021-05-26

js canvas实现泡泡龙

文章目录隐藏

用到的素材
代码时间

将图片绘制到 canvas 中：
获取并裁剪画布的点阵信息

通过点阵信息生成气泡 dom

需求 1：气泡要浮动（css 动画，easy）
需求 2：气泡组成一条龙

用到的素材

先用图片搜索找一张龙的剪影

泡泡素材

泡泡是透明的，所以大家看不见，不过没关系，后面我会附上下载链接

代码时间

将图片绘制到 canvas 中：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "dragon.jpg";
image.onload = function(){
    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image,0,0);
}

获取并裁剪画布的点阵信息

var imageData = ctx.getImageData(0,0,image.width,image.height).data;
ctx.fillStyle = "#ffffff";
ctx.fillRect(0,0,image.width,image.height);

var gap = 6;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
        var position = (image.width * h + w) * 4;
        var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

        if(r+g+b==0){
            ctx.fillStyle = "#000";
            ctx.fillRect(w,h,4,4);
        }
    }
}

现在我们获得了这样一条龙的点阵信息

通过点阵信息生成气泡 dom

var dragonContainer = document.getElementById("container");
var dragonScale = 2;

for (var h = 0; h < image.height; h+=gap) {
    for(var w = 0; w < image.width; w+=gap){
        var position = (image.width * h + w) * 4;
        var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];

        if(r+g+b==0){
            var bubble = document.createElement("img");
            bubble.src = "bubble.png";
            bubble.setAttribute("class","bubble");

            var bubbleSize = Math.random()*10+20;
            bubble.style.left = (w*dragonScale-bubbleSize/2) + "px";
            bubble.style.top = (h*dragonScale-bubbleSize/2) + "px";
            bubble.style.width = bubble.style.height = bubbleSize+"px";
            bubble.style.animationDuration = Math.random()*6+4 + "s";

            dragonContainer.appendChild(bubble);
        }
    }
}

所有源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML 龙</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            background: #333;
        }

        .bubble {
            position: absolute;
            animation-timing-function: linear;
            animation-name: floating;
            animation-iteration-count: infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-5px);
            }

            100% {
                transform: translateY(0px);
            }
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            init();
        }

        function init() {
            drawDragonImageInCanvas();
        }

        function drawDragonImageInCanvas(cb) {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            var image = new Image();
            image.crossOrigin = '';
            image.src = "https://media.mybj123.com/wp-content/uploads/2021/05/1621998251-8621ffdbc569882.jpg";
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;

                ctx.drawImage(image, 0, 0);

                var imageData = ctx.getImageData(0, 0, image.width, image.height).data;

                ctx.clearRect(0, 0, image.width, image.height);

                var gap = 10;

                var dragonContainer = document.getElementById("container");
                var dragonScale = 2;

                for (var h = 0; h < image.height; h += gap) {
                    for (var w = 0; w < image.width; w += gap) {
                        var position = (image.width * h + w) * 4;
                        var r = imageData[position],
                            g = imageData[position + 1],
                            b = imageData[position + 2];

                        if (r + g + b == 0) {
                            var bubble = document.createElement("img");
                            bubble.src = "https://media.mybj123.com/wp-content/uploads/2021/05/1621998248-a3fa9e0b6b24b1c.png";
                            bubble.setAttribute("class", "bubble");

                            var bubbleSize = Math.random() * 10 + 20;

                            bubble.style.left = (w * dragonScale - bubbleSize / 2) + "px";
                            bubble.style.top = (h * dragonScale - bubbleSize / 2) + "px";

                            bubble.style.width = bubble.style.height = bubbleSize + "px";

                            bubble.style.animationDuration = Math.random() * 6 + 4 + "s";

                            dragonContainer.appendChild(bubble);
                        }
                    }
                }
            }
        }
    </script>
</head>

<body>
    <div id='container' style="width: 100%;height: 100%;position: absolute;z-index: 2;"></div>
    <canvas id='canvas' style="position: absolute;z-index: 1;filter: blur(5px);"></canvas>
</body>

</html>

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！