js canvas实现泡泡龙

  • 需求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);
        }
    }
}

js canvas实现泡泡龙

所有源码:

<!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>
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » js canvas实现泡泡龙

发表评论

提供最优质的资源集合

立即查看 了解详情